<!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标签中最后两个图片必须和第一,二相同,从而做到动画无缝衔接