为网站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; 
}