说明:
在网上看到知更鸟博客logo都有光一闪一闪的效果,刹是惹人喜欢,于是在网上看了下产生扫光效果的原因,原来是通过css代码实现,于是自己看着别人的博客自己鼓捣了下,于是也给自己的logo加了扫光效果。
教程:
将下面这段代码添加到主题的样式表的结尾,对于大多数主题来说为style.css文件;
参数配置
#header .logo根据每个网站style.css而定,可能为.logo、#logo等,可参考自己网站的css文件配置。
#header .logo a:before一般网站logo都带有A标签跳转,所以在此设置a:before的CSS,即在A标签生效前执行该段CSS。
overflow: hidden这个代码非常重要,可以限制扫光效果在logo所占的范围内,避免扫光效果溢出,影响美观。
@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的 logo 的大小和布局进行调整即可(按F12可以修改参数自行调试)。
保存后去看看效果。
一个人有多热心,他就会感到有多寒冷