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>
效果圖：一只滾動，鼠標懸浮及停止滾動
