h5-动画小案例-滚动展示
1.html区域
1 <div> 2 <ul> 3 <li><img src="../img/a.jpg" alt=""></li> 4 <li><img src="../img/b.jpg" alt=""></li> 5 <li><img src="../img/c.jpg" alt=""></li> 6 <li><img src="../img/d1.jpg" alt=""></li> 7 <li><img src="../img/e.jpg" alt=""></li> 8 <li><img src="../img/f.jpg" alt=""></li> 9 <li><img src="../img/g.jpg" alt=""></li> 10 <li><img src="../img/h.jpg" alt=""></li> 11 <li><img src="../img/a.jpg" alt=""></li> 12 <li><img src="../img/b.jpg" alt=""></li> 13 <li><img src="../img/c.jpg" alt=""></li> 14 <li><img src="../img/d1.jpg" alt=""></li> 15 <li><img src="../img/e.jpg" alt=""></li> 16 <li><img src="../img/f.jpg" alt=""></li> 17 <li><img src="../img/g.jpg" alt=""></li> 18 <li><img src="../img/h.jpg" alt=""></li> 19 </ul> 20 </div>
2.css代码区域
1 <style> 2 *{ 3 padding: 0; 4 margin: 0; 5 } 6 img{ 7 width: auto; 8 height: 155px; 9 } 10 div{ 11 width: 1480px; 12 height: 155px; 13 margin: 100px auto; 14 background-color: #ddd; 15 overflow: hidden; 16 } 17 div > ul{ 18 width: 200%; 19 list-style: none; 20 21 /*添加动画*/ 22 /*名字*/ 23 animation-name: move; 24 /*耗时*/ 25 animation-duration: 7s; 26 /*无限循环*/ 27 animation-iteration-count: infinite; 28 /*时间函数*/ 29 animation-timing-function: linear; 30 } 31 32 div > ul > li{ 33 width: auto; 34 float: left; 35 } 36 37 div > ul >li > img{ 38 height: 100%; 39 } 40 41 /*鼠标上移，停止动画*/ 42 div:hover > ul{ 43 /*修改鼠标样式*/ 44 cursor: pointer; 45 /*暂停动画*/ 46 animation-play-state: paused; 47 } 48 49 /*创建动画*/ 50 @keyframes move { 51 from{ 52 transform: translateX(0); 53 } 54 to{ 55 transform: translateX(-1480px); 56 } 57 } 58 59 </style>
效果图：一只滚动，鼠标悬浮及停止滚动
