[分享]css两个盒子互换的动画

在网页设计中，CSS动画可以让界面更为生动有趣。今天我们将介绍如何用CSS实现盒子之间的互换动画。/ 首先，我们需要两个div / .box1 { width: 200px; height: 200p...

在网页设计中，CSS动画可以让界面更为生动有趣。今天我们将介绍如何用CSS实现盒子之间的互换动画。

/* 首先，我们需要两个div */
.box1 {
  width: 200px;
  height: 200px;
  background-color: #FFC107;
  position: absolute;
  top: 50%;
  left: -100px;
  transform: translate(-50%,-50%);
  transition: all 1s ease-in;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translate(50%,-50%);
  transition: all 1s ease-in;
}

/* 接下来，我们需要定义hover时的样式 */
.box1:hover {
  transform: translate(100%, -50%);
}

.box2:hover {
  transform: translate(-100%, -50%);
} 

这段CSS定义了两个方块，分别是.box1和.box2，并设置了它们的基本样式，包括背景颜色、宽度高度、位置等。然后是定义了鼠标hover的样式，在.hover时，利用translate函数将.box1移动到页面的最右侧，同时将.box2移动到页面的最左侧，实现盒子之间的互换。

这是一种简单而实用的CSS动画，可以让你的网页更具有交互性。希望本篇文章能够对你带来帮助。