为网站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; 
}
《为网站LOGO添加扫光特效》版权归逐凨所有
转载请保留原文链接:https://izhizu.com/wordpress/34.html
THE END
分享
二维码
< <上一篇
下一篇>>