CSS 实现 Logo 扫光效果

HOMIE方方 • 2022-05-12 • WordPress, 技术分享 • 385 阅读

在网上看到很多博客logo都有光一闪一闪的效果，刹是惹人喜欢，于是在网上看了下产生扫光效果的原因，原来是通过css代码实现，于是自己看着别人的博客自己鼓捣了下，于是也给自己的logo加了扫光效果。

 

  1. 用 CSS3 伪元素 :bfore 或 :after 添加一扫光层；
  2. 现用 transform:rotate(-45deg) 旋转 45 度；
  3. CSS 控制位置和动画时间等。

 

CSS代码

将下面这段代码添加到主题的样式表的结尾，对于大多数主题来说为style.css文件；

此处内容需要 回复 后才能查看

 

将以上CSS代码添加至主题根目录下的style.css底部保持即可，前台刷新本地浏览器缓存即可看到效果。

@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的 logo 的大小和布局进行调整即可。

版权声明：
作者：HOMIE方方
链接：https://www.ffnb.top/329.html
转载请注明来源：HOMIE工作室
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。
THE END
分享
二维码
打赏
海报
CSS 实现 Logo 扫光效果
在网上看到很多博客logo都有光一闪一闪的效果，刹是惹人喜欢，于是在网上看了下产生扫光效果的原因，原来是通过css代码实现，于是自己看着别人的博客自己鼓捣……
<<上一篇
下一篇>>
文章目录
关闭
目 录