为网站LOGO添加扫光特效

为什么有些网站logo会有一道会动的光效?之前还以为是GIF图,今天在闲逛时发现竟然是个扫光特效,之前还没了解到过,惭愧惭愧。

下面给大家分享网站LOGO扫光特效的CSS代码:

 float:left; max-height: 50px;
}
.site-logo:before { content: ""; position: absolute; width: 150px; height: 10px; background-color: rgba(255, 255, 255, 0.5); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: blink 1s ease-in 1s infinite; animation: blink 1s 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;}
}

将上面的代码复制 进主题的主要样式表当中并上传,大多数主题的主要样式表命名为style.css,但是有一部分主题的不一样,这个需要自己去寻找。

当然也可以修改部分参数,达到完美匹配的效果。

另外,在某些自适应站点当中可能会出错 ,可以试着将以下代码删除(也就是第一段):

.site-logo{ position: relative; overflow: hidden; float:left; max-height: 50px;
}
本文由 猫鼬博客 作者:十八 发表,其版权均为 猫鼬博客 所有,文章内容系作者个人观点,不代表 猫鼬博客 对观点赞同或支持。如需转载,请注明文章来源。
百度已收录

评论:

4 条评论,访客:4 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)
    • avatar
      十八发布于: 

      可以试着去找一些免费LOGO生成。

  1. avatar
    里维斯社发布于: 

    看起来还挺简单的,不过我的主题带这种功能,没有用扫光

发表评论