<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 动画</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; }
.view { width: 882px; height: 86px; margin: 200px auto; position: relative; overflow: hidden; border: 3px solid red; }
ul { width: 1764px; height: 86px; padding: 0; margin: 0; list-style: none; position: absolute; left: 0; animation: move 7s linear infinite; }
li { float: left; font-size: 0; }
@keyframes move { 0%{
}
100%{ transform:translateX(-882px) } } .view:hover ul{ /* animation-paly-state: running:播放 paused: 暂停 */ /* 鼠标移动的轮播图时 动画停止*/ animation-play-state: paused; }
</style> </head> <body> <div class="view"> <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>
