<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.d4,.d2,.d3{
width: 100px;
height: 100px;
/*display: inline-block;*/
float: left;
}
.d0{
width: 100px;
height: 100px;
overflow: hidden;
margin: 100px;
border: 1px solid red;
position: relative;
}
.d1{
width: 440px;
height: 100px;
position: absolute;
animation:cs 5s linear infinite;
animation-direction: normal;
}
.d2{
background: green;
}
.d3{
background: red;
}
.d4{
background: blue;
}
@keyframes cs{
0% {left: 0px};
55%{left: -100px;}
75%{left: -200px;}
100%{left: -300px;}
</style>
</head>
<body>
<div class="d0"> <!-- 100 -->
<div class="d1"> <!-- 400 -->
<div class="d2">1</div> <!-- 100 -->
<div class="d3">2</div>
<div class="d4">3</div>
<div class="d2">1</div>
</div>
</div>
</body>
</html>轮播模型
猜你喜欢
转载自blog.csdn.net/Learn_inCSDN/article/details/80058123
今日推荐
周排行