CSS 实现 Logo 扫光效果

在网上看到很多博客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代码实现,于是自己看着别人的博客自己鼓捣……
<<上一篇
下一篇>>
文章目录
关闭
目 录