css3动画实现无缝连接
程序员文章站
2022-03-01 21:18:39
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*body{
margin: 0;
padding: 0;
}
.warp{
width: 1500px;
height: 135px;
border: 3px solid red;
margin: 300px auto;
position: relative;
overflow: hidden;
}
.warp ul{
width:3000px;
height: 135px;
position: absolute;
animation: moves 10s linear infinite;
padding: 0;
margin: 0;
}
.warp li{
float: left;
list-style: none;
margin-left: 5px;
width: 200px;
}
@keyframes moves{
0%{
transform: translateX(0px);
}
100%{
transform: translateX(-1500px);
}
}
.warp:hover ul{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="warp">
<ul>
<li><img src="img/Lol-01.jpg"></li>
<li><img src="img/Lol_02.jpg"></li>
<li><img src="img/Lol_03.jpg"></li>
<li><img src="img/Lol_04.jpg"></li>
<li><img src="img/Lol_05.jpg"></li>
<li><img src="img/Lol_06.jpg"></li>
<li><img src="img/Lol-07.jpg"></li>
<li><img src="img/Lol-01.jpg"></li>
<li><img src="img/Lol_02.jpg"></li>
<li><img src="img/Lol_03.jpg"></li>
<li><img src="img/Lol_04.jpg"></li>
<li><img src="img/Lol_05.jpg"></li>
<li><img src="img/Lol_06.jpg"></li>
<li><img src="img/Lol-07.jpg"></li>
</ul>
</div>
</body>
</html>
上一篇： css3 实现Loading加载动画
下一篇： 属性