芝兰生幽谷
不以无人而不芳

为网站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; 
}
赞(0)
转载请注明出处:猫鼬博客 » 为网站LOGO添加扫光特效
分享到: 更多 (0)

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    😛 我的小站连个logo都还没有呢

    梁兴健6个月前 (05-03)回复
    • 可以试着去找一些免费LOGO生成。

      十八6个月前 (05-03)回复
  2. #2

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

    里维斯社5个月前 (05-04)回复
  3. #3

    这篇文章争议的地方很多,首先第一段代码没有复制粘贴完整,其次部分站点效果不理想 不能粗暴的就删除某个类的样式,主要还是调节样式;而这个.site-logo是要根据logo盒模型的具体类选择器来更改的,。

    雅兮网5个月前 (05-05)回复
    • 感谢建议,这是我转载的,还没来得及试,可能有些地方还需要修改。

      十八5个月前 (05-05)回复