WordPress的logo扫光特效

研究思路

1. 用 CSS3 伪元素 :bfore 或 :after 添加一段扫光层代码；
2. 用 transform:rotate(-45deg) 旋转 45 度（角度可自定义）；
3. CSS 控制位置和动画时间等。

:before 选择器介绍

1. :before 选择器在被选元素的内容前面插入内容。
2. 使用 content 属性来指定要插入的内容。
3. 所有主流浏览器都支持:before选择器。
4. before在IE8中运行，必须声明 <!DOCTYPE> 。
5. :befor、:after是CSS的伪元素。

绑定logo对应标签代码如下，效果可参考星空社区网站logo（网站左上角）。

.header-logo {position:relative;float:left;margin-right:10px;padding:5px 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);/*角度倾斜45*/
-webkit-animation: searchLights 1s ease-in 1s infinite;
-o-animation: searchLights 1s ease-in 1s infi