WordPress网站Logo扫光扫光特效css

WordPress网站Logo扫光扫光特效其实就是一个css的效果!

刚好今天在一个老乡的博客看到就分享给大家！

怎么用呢？找到你的主题目录下的样式文件style.css 还要看一下你的logo样式的名称class="logo-img-pc"

把下面css中的header-logo改成你自己网站logo的样式标签。

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

好了,就是这样这个特效就加上了,如果你失败了,联系我吧有空给你看看！