<!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>
07-05
562
562
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
