WordPress下LOGO扫光特效

效果请看本站LOGO

在主题根目录下找到 style.css 文件,或者在网站合适位置加入如下代码:

/* 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扫光结束 */

完结,撒花 。。

版权声明

1、本文地址:https://www.09606.com/124.html
2、转载请保留本文地址及链接,本站保留追究法律责任的权力。
3、部分文章来源于网络,仅作为学习展示之用,版权归原作者所有。
4、因部分文章网络流转次数较多,已无法追溯至原作者,若遗漏导致侵犯了您的权益,请您 留言给我

THE END
分享
二维码
打赏
< <上一篇
下一篇>>