之前公式有一個小的case，文字輪播，鼠標移入后輪播暫停，移除后輪播繼續，考慮用js寫，但想到c3動畫api：animation可以實現，就利用它來實現，不需要js哦。
首先還是介紹一下animation吧。
基礎用法（詳見w3c）：
下面開始代碼實現步驟
1，輪播圖的實現原理如圖（渣渣美術手感，謝絕吐槽─━ _ ─━）
html元素構建結構類似這樣
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
</ul>
</div>
如圖，設置每個li標簽的寬高和顯示元素<div>相同，這時候會發現ul的長度會超過div,再利用css屬性中overflow：hidden，（內容會被修剪，並且其余內容是不可見的）。他會隱藏掉多余的部分，這樣：
這是后你移動ul,就會產生圖片移動的輪播效果
好，下面我們進入代碼編寫模塊。
首先根據 animation的設置，寫一個
@keyframes
@keyframes imgMove {
from {
transform: translateX(0px);
}
to {
transform: translateX(-882px);
}
}
這里可以看到，我是利用transform: translateX( )來控制他的位移的，
然后是animation 的編寫
animation: imgMove 5s linear infinite;
介紹一下設置
1-
animation-name 執行動畫的名稱imgMove
2-animation-duration 完成動畫的時間5s
3-animation-timing-function 完成動畫是的速度 linear -勻速
4-animation-iteration-count 播放的次數 infinite-無限次播放
最后是實現鼠標移入動畫暫停，這里有兩個介紹：
1· :hover{}定義鼠標移入觸發的事件
2·animation-play-state:paused/running 動畫的暫停與播放
下面是完整代碼，使用時需要添加圖片，各位自己添加哈
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { width: 882px; height: 86px; margin: 200px auto; overflow: hidden; } div > ul { /*設置ul的寬度為2倍div的寬度*/ width: 200%; list-style: none; /*動畫屬性*/ animation: imgMove 5s linear infinite; } /* 暫停動畫 */ div>ul:hover{ animation-play-state: paused; } div > ul > li { width: 126px; float: left; } div img { width: 100%; } /*創建動畫*/ @keyframes imgMove { from { transform: translateX(0px); } to { transform: translateX(-882px); } } </style> </head> <body> <div> <ul> <li><img src="images/1.jpg" alt=""/></li> <li><img src="images/2.jpg" alt=""/></li> <li><img src="images/3.jpg" alt=""/></li> <li><img src="images/4.jpg" alt=""/></li> <li><img src="images/5.jpg" alt=""/></li> <li><img src="images/6.jpg" alt=""/></li> <li><img src="images/7.jpg" alt=""/></li> <!--將需要輪播的圖片在復制一份--> <li><img src="images/1.jpg" alt=""/></li> <li><img src="images/2.jpg" alt=""/></li> <li><img src="images/3.jpg" alt=""/></li> <li><img src="images/4.jpg" alt=""/></li> <li><img src="images/5.jpg" alt=""/></li> <li><img src="images/6.jpg" alt=""/></li> <li><img src="images/7.jpg" alt=""/></li> </ul> </div> </body> </html>
搞定 !