在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
在WordPress博客中实现LOGO图片扫描光线的效果
https://xsunhua.cn/162.html



共有 0 条评论