CSS 实现 Logo 扫光效果

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

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

用 CSS3 伪元素 :bfore 或 :after 添加一扫光层；
现用 transform:rotate(-45deg) 旋转 45 度；
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 WordPress 美化

二维码

打赏

海报

CSS 实现 Logo 扫光效果

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

罗翔：时间是什么？

<<上一篇

0基础学摄影的小白，应该如何学摄影？超详细图文教程！

下一篇>>

文章目录

关闭

取消回复

共有 17 条评论

青年

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
终于找到组织了，堪比全网最全

2023-01-09 20:13 回复
知道百科

Mozilla/5.0 (Linux; Android 10; MI 8 Build/QKQ1.190828.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/86.0.4240.99 XWEB/4317 MMWEBSDK/20220903 Mobile Safari/537.36 MMWEBID/9101 MicroMessenger/8.0.28.2240(0x28001C55) WeChat/arm64 Weixi
抱最大希望，尽最大努力，做最坏打算，持最好心态

2022-10-17 09:28 回复
lance

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.37
拿走了

2022-10-12 05:53 回复
前端大咖

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
在此获取

2022-09-06 10:10 回复
前端大咖

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
偷走了

2022-09-06 08:12 回复
1. HOMIE方方@前端大咖
  
  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.70
  随便偷
  
  2022-09-06 09:46 回复
867739977

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15
拿

2022-08-24 00:54 回复
chen

Mozilla/5.0 (Linux; U; Android 12; zh-cn; 21091116C Build/SP1A.210812.016) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/89.0.4389.72 MQQBrowser/12.9 Mobile Safari/537.36 COVC/046121
谢了

2022-08-09 21:43 回复
橙45654654

Mozilla/5.0 (Windows NT 11.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.62
我试试

2022-07-21 21:58 回复
陈哥

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/89.0.4389.116 Safari/534.24 XiaoMi/MiuiBrowser/16.6.6 swan-mibrowser
我试试

2022-07-09 15:23 回复
小暖阳

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36
我也弄一下

2022-07-05 09:35 回复
天下

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36
路过看看

2022-05-14 23:20 回复
天下

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36 Edg/101.0.1210.39
感谢

2022-05-14 22:52 回复
ylxc

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0
真不错啊

2022-05-14 22:35 回复
HOMIE方方

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36 Edg/101.0.1210.39
我也来顶

2022-05-13 15:42 回复
ylxc

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0
芜湖

2022-05-13 15:26 回复
Guangran

Mozilla/5.0 (Windows NT 11.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36
灌水

2022-05-13 15:24 回复