纯CSS代码添加网站logo扫光效果，动画logo更好看

建站的朋友都希望自己的网站更美观些，总会时不时的进行一下美化，就像一个家，我们也会经常添点家具啊，装饰之类的。今天给大家分享一个给网站logo添加扫光效果的纯CSS代码，动态logo看上去好看点，效果见本站。

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

LOGO扫光效果CSS代码：

.logo{
width:200px;
height:70px;
display: flex;
line-height: 70px;
position: relative;
overflow: hidden;
}
.logo img{
width:100%;
height:70px;
}
/**根据logo外div样式名称修改before前名称**/
.logo:before{ 
content:"";
position: absolute;
left: -10px; /**第一个数字参数控制扫光速度，数字越大越慢**/
top: -460px;
width: 200px;
height: 10px; /**光标的宽度，可根据实际调整**/
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 1.5s ease-in 1s infinite;/**第一个数字参数控制扫光速度，数字越大越慢**/
}
@-webkit-keyframes searchLights {
0% { left: -80px; top: 0; }
to { left: 130px; top: 0px; }
}
@-o-keyframes searchLights {
0% { left: -80px; top: 0; }
to { left: 130px; top: 0px; }
}
@-moz-keyframes searchLights {
0% { left: -80px; top: 0; }
to { left: 130px; top: 0px; }
}
@keyframes searchLights {
0% { left: -80px; top: 0; }
to { left: 130px; top: 0px; }
}

具体的扫光大小范围和速度，大家可以自行调整。如果上面那段代码造成了手机端错位，可以用下面这个代码：

/*扫光样式代码开始*/
.logo {position:relative;float:left;margin-right:10px;padding:5px 0;overflow: hidden;}
.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 infinite;
animation: searchLights 2s ease-in 2s infinite;/*光扫过去的时间，自己修改，可以加快*/}
@-webkit-keyframes searchLights {
0% { left: -180px; top: 0; }
to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
0% { left: -180px; top: 0; }
to { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
0% { left: -180px; top: 0; }
to { left: 120px; top: 100px; }
}
@keyframes searchLights {
0% { left: -180px; top: 0; }
to { left: 120px; top: 100px; }
}
/*扫光样式代码结束*/

你说啥，logo还是错位？哎，没事的哈，咱这还有一段网站Logo美化的CSS代码，流光logo效果一定让你实现了：

/**logo闪光效果**/
.logo{
position: relative;
overflow: hidden;
max-height: 60px;
}
/**伪元素法生成长条**/
.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 alternate;
/**动画名，持续，加速，循环，逆播放**/
animation: blink 1s ease-in 1s infinite alternate;
}

@-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闪光效果j结束**/