看到大前端主题有logo扫光特效,感觉挺酷的,我这个白嫖的主题也给弄上这高大尚的效果。
将以下代码加到你的网站css里面,typecho可以放在style.css里面,部分主题可能没有这个,随便添加css文件里面,能被引用到就行了。
.logo:before{content: "";
position: absolute;
width: 110px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);/*角度倾斜45*/-webkit-animation: blink 1.5s ease-in 1s infinite;/*光扫过去的时间,自己修改,可以加快*/
}
@-webkit-keyframes blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@-o-keyframes blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@keyframes blink {
from {left: -100px;top: 0;}
to {left: 320px;top: 0;}
}
使用说明
F12
找到你的logo所在的div,然后找该div的class
<h1 class="logo"> <a href="https://img.jinjun.top/images/">
<img src="https://img.jinjun.top/images/usr/themes/DUX/img/logo.png" alt="钧言极客">钧言极客</a> </h1>
这里看class是logo,如果不是请自行修改.logo:before{
的logo
改成你的logo的class
,完成以上常规操作就可以啦。
最新评论
是这样的,运营商大力推ipv6,但是I...
感谢分享!
写的很详细具体,学习到了,多谢博主的分...
/vhs/kangle/ext/tpl...
“有一些东西,用过不久就遗忘了,等在使...
gita一样也有这个功能,插件也和gi...