<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
nav {
width: 882px;
height: 86px;
border: 1px solid skyblue;
margin: 100px auto;
overflow: hidden;
}
nav li {
float: left;
}
li img {
width: 126px;
height: 96px;
}
nav ul {
width: 200%;
animation: moving 5s linear infinite; /* 引用动画 */
/* linear匀速运动 */
}
/* 定义动画 */
@keyframes moving{
from{
transform: translateX(0);
}
to{
transform: translateX(-882px);
}
}
nav:hover ul{ /* 鼠标经过nav 里面的ul就不做动画了 */
animation-play-state: paused; /* 鼠标经过暂停动画 */
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.png" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.png" alt=""></li>
<li><img src="6.png" alt=""></li>
<li><img src="7.png" alt=""></li>
<li><img src="1.jpg" alt=""></li> <!-- 为实现滚动效果在放一组 -->
<li><img src="2.png" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.png" alt=""></li>
<li><img src="6.png" alt=""></li>
<li><img src="7.png" alt=""></li>
</ul>
</nav>
</body>
</html>
