wordpress主题网站logo添加扫光效果教程

说明：

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

教程：

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

/**logo扫光效果CSS 开始**/
#header .logo{position:relative;float:left;margin-right:20px;padding:15px 0;overflow: hidden;}
#header .logo a:before{
content:"";
position: absolute;
left: -665px;
top: -460px;
width: 200px;
height: 15px;
background-color: rgba(255,255,255,.5);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 1s ease-in 1s infinite;
-o-animation: searchLights 1s ease-in 1s infinite;
animation: searchLights 1s ease-in 1s infinite;
}
@-webkit-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
/**logo扫光效果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可以修改参数自行调试）。

保存后去看看效果。