<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 882px; height: 86px; margin: 100px auto; background-color: #ccc; overflow: hidden; } div > ul { width: 200%; list-style: none; /* 设置动画函数步骤*/ /* 设置名称 */ animation-name: move; /* 设置动画耗时 */ animation-duration: 7s; /* 设置无限循环 */ animation-iteration-count: infinite; /* 设置时间函数 */ animation-timing-function: linear; } div > ul > li { width: 126px; float: left; } div > ul > li > img { width: 100%; } /* 鼠标上移的时候,停止动画 */ div:hover > ul { cursor: pointer; animation-play-state: paused; } /* 创建动画 */ /* 用到的是前面定义的名称 */ @keyframes move { from{ transform: translateX(0); } to{ transform: translateX(-882px); } } </style> </head> <body> <div> <ul> <li><img src="./img/th.jpg" alt=""></li> <li><img src="./img/th.jpg" alt=""></li> <li><img src="./img/th.jpg" alt=""></li> <li><img src="./img/th.jpg" alt=""></li> <li><img src="./img/th.jpg" alt=""></li> <li><img src="./img/th.jpg" alt=""></li> <li><img src="./img/th.jpg" alt=""></li> <li><img src="./img/th.jpg" alt=""></li> </ul> </div> </body> </html>