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

共计 1110 个字符，预计需要花费 3 分钟才能阅读完成。

在网络中，我们可以看到有些站点的 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 度扫光特效了。