我需要对多个div元素实现浮动动画,请给出代码
时间: 2024-05-11 14:16:14 浏览: 15
以下是使用CSS实现对多个div元素实现浮动动画的代码:
HTML代码:
```
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
```
CSS代码:
```
.box {
position: absolute;
width: 50px;
height: 50px;
background: #ff8040;
border-radius: 50%;
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translate(0, 0); }
50% { transform: translate(0, 20px); }
100% { transform: translate(0, 0); }
}
#box1 { left: 100px; top: 100px; }
#box2 { left: 200px; top: 200px; }
#box3 { left: 300px; top: 300px; }
#box4 { left: 400px; top: 400px; }
#box5 { left: 500px; top: 500px; }
```
这段代码会让五个div元素以浮动动画的方式在页面上漂浮动。您可以根据需要,调整每个div元素的left和top属性来改变它们的位置。