您现在的位置是:首页 > 学无止境> CSS3|HTML5网站首页学无止境CSS3|HTML5
css光泽一闪而过的效果
- CSS3|HTML5
- 2020-06-17
- 1281已阅读
简介css光泽一闪而过的效果
html:
<div class="top-1 box"> <a href="javascript:;"> <img alt="" src="http://www.studyfx.cn/public/uploads/20190825/3994e87623b8e515e5f017379b4c9bcd.jpg" style="display:block;"></a> <b class="shan"></b> </div>
css:
.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; }
上一篇:点击弹出导航效果
下一篇:css3鼠标点击立体翻转