css两个div同时移动 |图片由近到远消失css

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

上面的代码展示了一个包含两个div的容器。这里的其中一个div（box1）是红色的，而另一个div（box2）是蓝色的，大家将同时移动这两个div。

.container {
position: relative;
width: 100%;
height: 200px;
}
.box1, .box2 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
left: -140px;
}
.box2 {
background-color: blue;
right: -140px;
}

大家使用CSS将其放置在容器中，并将其设置在容器的正中心。.box1和.box2都设置了绝对定位，并使用transform属性垂直居中，大家可以使用top:50%和transform:translateY(-50%)来实现。大家还将两个div的宽度和高度设置为100px，让它们看起来一样大小。

大家分别为.box1和.box2设置了不同的背景颜色，以区分它们。但是，大家将.box1放置在容器的左侧，而.box2放置在容器的右侧。大家可以通过left和right属性来实现这一点。

.container:hover .box1, .container:hover .box2 {
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

这里的关键是:hover伪类，它允许大家定义容器中两个div的行为。当鼠标悬停在.container上时，大家希望.box1和.box2都移动到容器的中心。大家可以使用left:50%将它们水平移动到容器的中心，然后使用transform:translateX(-50%)和transform:translateY(-50%)重新将它们垂直居中。

这就是大家如何使用CSS控制两个div同时移动。这种方法具有足够的灵活性，可以用于多种情况。如果您对移动元素感兴趣，那么您应该花时间研究关于CSS移动元素的更多内容。