本文作者:35博客

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

35博客 3个月前 ( 08-25 ) 335 抢沙发

在网络中,我们可以看到有些站点的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元素选择器名称是.logo a

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

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

效果可以看看本站的logo

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

文章版权及转载声明:

作者:35博客本文地址:https://www.35boke.com/post/139.html发布于 3个月前 ( 08-25 )
文章转载或复制请以超链接形式并注明出处35博客

分享到:
赞(0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

发表评论

快捷回复:

评论列表 (暂无评论,335人围观)参与讨论

还没有评论,来说两句吧...