纯代码为网站LOGO添加扫光动画特效

我们浏览网站时经常会看到一些网站的LOGO带有扫光效果，像光线扫过一样，看上去比较炫酷美观的。研究了一下，发现是用:before选择器实现的扫光效果，现在把代码分享出来，觉得好看的可以在自己的站点上试一试。

研究思路

1. 用 CSS3 伪元素 :bfore 或 :after 添加一段扫光层代码；
2. 用 transform:rotate(-45deg) 旋转 45 度（角度可自定义）；
3. CSS 控制位置和动画时间等。

before 选择器介绍

1. :before 选择器在被选元素的内容前面插入内容。
2. 使用 content 属性来指定要插入的内容。
3. 所有主流浏览器都支持:before选择器。
4. before在IE8中运行，必须声明 <!DOCTYPE> 。
5. :befor、:after是CSS的伪元素。

CSS代码：

/**logo闪光效果CSS**/
.logo-wrapper {
    position: relative;
    font-size:2em;
    font-weight:700;
    line-height:39px;
    overflow:hidden;
    margin:0;
}
.logo-wrapper::before{
    content:"";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}
.yousc-dark .logo-wrapper::before{
    content:"";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(25, 22, 22, 0.55);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}
@-webkit-keyframes searchLights {
    0% { left: -90px; top: 0; }
    to { left: 90px; top: 0; }
}

CSS代码2：

/**logo来回闪光效果CSS**/
.logo-wrapper {
	position:relative;
	overflow:hidden;
	margin:0px 0 0 0px
}
.logo-wrapper:before {
	content:"";
	position:absolute;
	left:-665px;
	top:-460px;
	width:200px;
	height:15px;
	background-color:rgba(255,255,255,.5);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
	-webkit-animation:searchLights 6s ease-in 0s infinite;
	-o-animation:searchLights 6s ease-in 0s infinite;
	animation:searchLights 6s ease-in 0s infinite
}
@-moz-keyframes searchLights {
	50% {left:-100px;top:0}
    65% {left:120px;top:100px}
}
@keyframes searchLights {
	40% {left:-100px;top:0}
	60% {left:120px;top:100px}
	80% {left:-100px;top:0px}
}

更改对应的logo元素选择器名称

.logo{
更改为
.你的logo对应元素标签{
.logo:before {
更改为
.你的logo对应元素标签:before {

WordPress添加方法

这段代码是CSS格式代码，一般情况下是添加到网站的主样式表中，对于大多数使用WordPress建站的朋友来说可以放到主题的style.css文件中，也有部分主题可能有单独的css文件，所以大家可以根据自己主题或者模版的情况选择放到相应的CSS文件即可。

规则控制扫光

@keyframes 规则控制扫光的起始位置和终止位置,以上的参数根据自己的logo的大小和布局进行调整即可。大家可以根据自己需要调整上面代码中的参数以适应自己的站点logo。

PS：部分自适应的主题需要把下面这段代码去掉：

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

使用wordpress的站长可以把代码中的.logo修改成自己主题使用的logo元素选择器名称，比如有的是.site-logo。原则上说这个代码应该可以适用于所有网站，并不仅限于wordpress程序。