css中一闪的效果,CSS光泽一闪而过的仿FLASH效果

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. 调用动画