<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0;padding: 0; } div{ margin: 100px auto; width: 600px; height: 200px; border:1px solid black; overflow: hidden; } ul{ width: 2000px; height: 200px; background: darkgray; animation:change 10s linear 0s infinite normal; /*动画元素，持续时间，速度，延迟时间，重复次数，是否往返*/ } ul:hover{ animation-play-state: paused; } ul:hover li{ opacity: 0.5; /*透明度，显示父元素颜色*/ } ul li:hover{ opacity: 1; } ul li{ width: 300px;height: 200px; list-style: none; float: left; border:1px solid black; background-color: brown; box-sizing: border-box; } @keyframes change{ from{margin-left: 0;} to{margin-left:-1200px ;} } </style> </head> <body> <div><ul> <li><img src=""/>1</li> <li><img src=""/>2</li> <li><img src=""/>3</li> <li><img src=""/>4</li> <li><img src=""/>1</li> <li><img src=""/>2</li> </ul></div> </body> </html>
注：img标签中最后两个图片必须和第一，二相同，从而做到动画无缝衔接