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

橘子网 2,583 4

在网络中,我们可以看到有些站点的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; 
}

效果展示

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

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

上一篇:

下一篇:

相关阅读

分享