HtmlCssJs
.box {
position:relative;
overflow:hidden;
cursor:pointer;
margin:0 auto;
width:820px;
}
@-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光泽一闪而过的仿FLASH效果-www.sucainiu.com积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载! 充值积分 充值会员 更多说明»
代码描述:css实现定时图片刷新的闪光效果
三部分组成:
1. 父级的.box
2. 子集的.shan
3. 调用动画