在垂直堆栈中画4个正方形来回移动,可以通过前端开发技术实现。以下是一个可能的解决方案:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 400px;
width: 100px;
position: relative;
}
.square {
width: 100px;
height: 100px;
position: absolute;
background-color: red;
transition: transform 0.5s ease;
}
</style>
</head>
<body>
<div class="container">
<div class="square" id="square1"></div>
<div class="square" id="square2"></div>
<div class="square" id="square3"></div>
<div class="square" id="square4"></div>
</div>
<script>
const squares = document.querySelectorAll('.square');
let direction = 1;
let position = 0;
function animateSquares() {
position += direction * 100;
if (position >= 300 || position <= 0) {
direction *= -1;
}
squares.forEach(square => {
square.style.transform = `translateY(${position}px)`;
});
}
setInterval(animateSquares, 1000);
</script>
</body>
</html>
这段代码创建了一个垂直堆栈容器,其中包含4个红色正方形。通过JavaScript的定时器和CSS的transform属性,每秒钟正方形在垂直方向上来回移动。可以根据需要调整容器和正方形的样式。
请注意,以上代码仅为示例,实际实现可能需要根据具体需求进行调整。
领取专属 10元无门槛券
手把手带您无忧上云