Html
    Css
    Js
 .box {
	position:relative;
	overflow:hidden;
	cursor:pointer;
	margin:0 auto;
	width:1000px;
}
@-webkit-keyframes changeImg {
	from {
	left:-100%;
}
100% {
	left:150%;
}
}.shan {
	position:absolute;
	-webkit-animation:changeImg 3s ease 0s;
	-o-animation:changeImg 3s ease 0s;
	animation:changeImg 3s ease 0s;
	top:0;
	width:30%;
	height:100%;
	content:"";
	background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
	background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
	background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
	background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
	transform:skewX(-45deg);
	animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css光泽一闪而过的效果

三部分组成

1. 父级的.box

2. 子集的.shan

3. 调用动画

1
      涛声依旧0
      2018/2/24 12:00:08