前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS轻松实现博客网站Logo扫光效果(亲测有效)

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

作者头像
李洋博客
发布2022-03-03 08:27:17
7270
发布2022-03-03 08:27:17
举报
文章被收录于专栏:李洋博客

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

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

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

html代码:

代码语言:javascript
复制
<div class="logo">
  <a href="http://zx.001666.cn/" title="辽联信息" rel="home">
    <img src="/zb_users/theme/weibolee/style/images/logo.png" alt="辽联信息">
  </a>
</div>

css代码:

代码语言:javascript
复制
.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命名,都得需要修改一些基础代码,记得修改之前要备份!备份!备份!要知道养成良好的备份习惯有多么的牛掰,好了,有问题留言反馈,一起学习,一起折腾!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • html代码:
  • css代码:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档