CSS 实现 Logo 扫光效果
在网上看到很多博客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 许可协议。
作者:HOMIE方方
链接:https://www.ffnb.top/329.html
转载请注明来源:HOMIE工作室
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。
THE END
8
二维码
打赏
海报


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

文章目录
关闭
青年
知道百科
lance
前端大咖
前端大咖
HOMIE方方@前端大咖
867739977
chen
橙45654654
陈哥
小暖阳
天下
天下
ylxc
HOMIE方方
ylxc
Guangran