网站LOGO添加扫光特效教程！

为什么有些网站logo会有一道会动的光效？你们之前还以为是GIF图吧，其实这是个扫光特效，下面给大家分享网站LOGO扫光特效的CSS代码：

 float:left; max-height: 50px; } .site-logo:before { content: ""; position: absolute; width: 150px; height: 10px; background-color: rgba(255, 255, 255, 0.5); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: blink 1s ease-in 1s infinite; animation: blink 1s ease-in 1s infinite; } @-webkit-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;} } @-o-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;} } @-moz-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;} } 

@keyframes blink {

from {left: -100px;top: 0;}

to {left: 320px;top: 0;}

}

将上面的代码复制 进主题的主要样式表当中并上传，大多数主题的主要样式表命名为style.css，但是有一部分主题的不一样，这个需要自己去寻找。

当然也可以修改部分参数，达到完美匹配的效果。

另外，在某些自适应站点当中可能会出错 ，可以试着将以下代码删除（也就是第一段）：

.site-logo{ position: relative; overflow: hidden; float:left; max-height: 50px; }