<!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>
