我们浏览网站时经常会看到一些网站的LOGO带有扫光效果，像光线扫过一样，看上去比较美观。以前楚狂人曾经自己用软件做过一个GIF格式的logo，可以达到类似的效果，但是今天发现可以用纯代码实现网站logo扫光的效果，还是很不错的。
LOGO闪光动画代码：　　这段代码是CSS格式代码，一般情况下是添加到网站的主样式表中，对于大多数使用wordpress建站的朋友来说可以放到主题的style.css文件中，也有部分主题可能有单独的css文件，比如本站现在用的DUX主题其主样式文件为main.css，所以大家可以根据自己主题或者模版的情况选择放到相应的CSS文件即可。

/**logo闪光效果CSS**/
　　.logo{

　　position:>

　　overflow: hidden;

　　float:left;

　　max-height: 50px;

　　}

　　.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;}

　　}

规则控制扫光的起始位置和终止位置,以上的参数根据自己的logo的大小和布局进行调整即可。大家可以根据自己需要调整上面代码中的参数以适应自己的站点logo。
PS：部分自适应的主题需要把下面这段代码去掉：

.logo{
　　position:>

　　overflow: hidden;

　　float:left;

　　max-height: 50px;

　　}

使用wordpress的站长可以把代码中的.logo修改成自己主题使用的logo元素选择器名称，比如有的是.site-logo。原则上说这个代码应该可以适用于所有网站，并不仅限于wordpress程序。
具体效果图可以看本站网客网logo