在WordPress博客中实现LOGO图片扫描光线的效果

话不多说直接开始

.navbar-brand{
position:relative;overflow:hidden;margin: 0px 0 0 0px;
                             }
.navbar-brand: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); 
-webkit-animation: searchLights 6s ease-in 0s infinite; 
-o-animation: searchLights 6s ease-in 0s infinite; 
animation: searchLights 6s ease-in 0s infinite;
}
@-moz-keyframes searchLights{
50%{
left: -100px; top: 0;
} 
65%{
left: 120px; top: 100px;
}
}
@keyframes searchLights{
40%{
left: -100px; top: 0;
} 
60%{
left: 120px; top: 100px;
} 
80%{left: -100px; top: 0px;
}
}

使用方法

将CSS代码添加至主题根目录下的style.css底部保持即可，前台刷新本地浏览器缓存即可看到效果。

使用提醒

第一行的.header-logo是确定特效的位置，可以更加明确需要特效的位置例如：.header-logo .logo