要让一组div沿着屏幕移动,可以使用CSS的动画和过渡效果来实现。以下是一种常见的实现方式:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ff0000;
animation: move 5s infinite linear;
}
@keyframes move {
0% {
left: 0;
}
100% {
left: calc(100% - 100px);
}
}
在上述代码中,.container
类设置了容器的样式,.box
类设置了每个div的样式,并使用animation
属性指定了一个名为move
的动画,持续时间为5秒,无限循环播放,线性变化。
这种方法使用CSS的动画和过渡效果来实现div的移动,可以通过调整动画的属性和持续时间来实现不同的效果。如果需要更复杂的动画效果,可以使用JavaScript或CSS框架来实现。
领取专属 10元无门槛券
手把手带您无忧上云