CSS代码实现网站logo扫光特效的方法_生活百科

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