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扫光结束 */
好了,就是这样这个特效就加上了,如果你失败了,联系我吧有空给你看看!