.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; }
三部分组成:
1. 父级的.box
2. 子集的.shan
3. 调用动画