[分享]css动画把div分开消失

CSS动画是一种非常有趣的技术，可以使网站更加生动和吸引人。今天，我们来介绍一个有趣的CSS动画：把div分开消失。/ html代码 / / CSS代码 / .box { width: 50...

CSS动画是一种非常有趣的技术，可以使网站更加生动和吸引人。今天，我们来介绍一个有趣的CSS动画：把div分开消失。

/* html代码 */
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

/* CSS代码 */
.box {
  width: 50px;
  height: 50px;
  background: blue;
  margin: 10px;
  float: left;
  animation: disappear 1s ease forwards;
}

@keyframes disappear {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
} 

首先，我们需要编写一个HTML代码，包含三个div元素放在一个容器中。接下来，我们使用CSS中的float属性将三个元素排成一行。

然后，我们为每个div元素设置背景颜色并添加一个名为“disappear”的CSS动画。这个动画是通过CSS3的keyframes机制实现的，它包含两个关键帧：from和to。

第一个关键帧中，我们将元素的opacity属性设置为1，这意味着元素是完全不透明的，并且它的transform属性设置为translateX(0)，即不偏移。第二个关键帧中，我们将opacity属性设置为0，这意味着元素会变得透明，而translateX(-100%)则表示元素将沿着x轴向左移动100%的距离。

最后，我们的CSS动画中使用了一些额外的参数。animation属性指定动画的名称、持续时间和缓动函数。在我们的例子中，动画名称为disappear，持续时间为1秒，缓动函数为ease。forwards参数告诉浏览器在动画结束后将元素的状态保留为最后一个关键帧的状态。

这就是我们的CSS动画了！运行代码，你会看到我们的三个元素在页面上分开消失，就像是由于某种黑魔法而消失了一样。