CSS代码实现网站logo扫光特效的方法

在网络中，我们可以看到有些站点的logo有扫光特效，非常有意思。乍一看还以为这种效果是gif格式的动态图所做，然而并不是，只要给网站加入一段CSS代码，网站立马逼格满满，下面随橘子君一起来看看CSS代码实现方法。

CSS代码

/**logo扫光效果CSS**/
.site-logo{
  position: relative;
  overflow: hidden;
  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文件，个别网站可能不是这个文件，不知道的站长可以在网页前端审查一下元素就知道主样式表文件了。同时要找到自己网站logo元素选择器的名称，如果对应的不是.site-logo这个名称，需要进行替换，如本站的logo元素选择器名称是.top-navi-logo

PS：部分自适应站点需要把下面这段代码去掉，也就是首段。

.site-logo{ 
    position: relative;
    overflow: hidden; 
    float:left; 
    max-height: 50px; 
}

效果展示

结语：网站logo扫光特效的方法因为是CSS代码实现，所以以上的方法可以适应其他程序网站，如织梦等，不仅仅局限于WordPress主题。通过以上方法给网站logo加入该特效代码后，如果看不到效果可能是浏览器缓存所致，清理缓存刷新一下页面就可以展示45度扫光特效了。

相关文章：

相关阅读