CSS轻松实现博客网站Logo扫光效果(亲测有效)

talklee

文章最后更新时间:2022年03月04日已超过755天没有更新。

最近有网友跟我反馈,想要一个logo扫光的特效,第一款主题梦想家就有这个特效,不过后期也有人反馈说太卡,使用主题的时候CPU就爆了,好吧,那我就撤了,把相关的特效删除了没在跟紧,记得之前张戈在博客中有谈到过这个事情,也是因为logo特效导致网站有些卡,所以他就给删除了,然后也好了,很神奇是不?

CSS轻松实现博客网站Logo扫光效果(亲测有效) 第1张

我就想着为什么有些人会卡有些人不卡呢,服务器配置太低,但是一个css而已的,应该占不上太多的资源吧,抽空把css的logo扫光特效优化下,在主题模板中也用上了最新的logo扫光,当然也一定是加上了开关,并不是所有人都喜欢的就弄个开关吧,两者互不影响,好了现在把代码献出,自行折腾。

html代码:

<div class="logo">
  <a href="https://www.talklee.com/" title="李洋博客" rel="home">
    <img src="https://www.talklee.com/zb_users/theme/hopelee/style/images/logo.png" alt="李洋博客">
  </a>
</div>

css代码:

.logo a{
    overflow:hidden;
    display: block;
}
.logo a:before {
  content: "";
  position: absolute;
  top: -50px;
  left: -15px;
  width: 250px;
  height: 12px;/**光标的宽度,可根据实际调整**/
  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: flashlights 1s ease-in 1s infinite;
  -o-animation: flashlights 1s ease-in 1s infinite;
  animation: flashlights 1.5s ease-in 1s infinite;/**1.5数字参数控制扫光速度,数字越大越慢**/
}
@-webkit-keyframes flashlights {
  0% { left: -100px; top: 0; }
  to { left: 120px; top: 100px; }
}
@-o-keyframes flashlights {
  0% { left: -100px; top: 0; }
  to { left: 120px; top: 100px; }
}
@-moz-keyframes flashlights {
  0% { left: -100px; top: 0; }
  to { left: 120px; top: 100px; }
}
@keyframes flashlights {
  0% { left: -100px; top: 0; }
  to { left: 120px; top: 100px; }
}

经过测试没有问题了,实际使用几天再看看效果吧,主题模板有更新的基本都会加上去,至于是否开启扫光特效根据个人喜好而定吧,直接使用是不能够的,毕竟不是所有的主题模板都是使用logo命名,都得需要修改一些基础代码,记得修改之前要备份!备份!备份!要知道养成良好的备份习惯有多么的牛掰,好了,有问题留言反馈,一起学习,一起折腾!

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,6751人围观)

还没有评论,来说两句吧...

目录[+]