下面的动画不工作。不确定是什么问题。圆需要反弹与每个圆有一个延迟给它一个蛇的效果。如果我设置圆的位置绝对它的工作,但我不希望他们是绝对的,因为然后所有的圆堆叠在彼此后面,这将需要左边距,以分开每个圆彼此,我不希望那样。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
list-style: none;
}
body{
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.circle-container{
position: relative;
width: 900px;
height: 300px;
background-color: lightgrey;
column-gap: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.circle{
height: 100px;
width: 100px;
border-radius: 50%;
animation: bouncingCircles 1s ease-in-out infinite alternate;
}
#one{
background-color: blue;
animation-delay: -0.25s
}
#two{
background-color: orange;
animation-delay: -0.55s
}
#three{
background-color: purple;
animation-delay: -0.65s
}
#four{
background-color: red;
animation-delay: -0.75s;
}
#five{
background-color: limegreen;
animation-delay: -0.80s;
}
@keyframes bouncingCircles{
0%{
top:-100px
}
100%{
top:200px
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<title>Training</title>
</head>
<body>
<div class="circle-container">
<div class="circle" id="one"></div>
<div class="circle" id="two"></div>
<div class="circle" id="three"></div>
<div class="circle" id="four"></div>
<div class="circle" id="five"></div>
</div>
<!--<input id="uploadImage" type="file" multiple class="sd">-->
<!--<canvas id="scene"></canvas>-->
<script type="module" src="training.js"></script>
</body>
</html>
1条答案
按热度按时间hgqdbh6s1#
不需要绝对定位。只需将它们设置为相对: