CSS - 容器上下浮动动画

CSS动画是一种很酷的效果，可以为网页增加一些令人惊叹的交互效果。本篇博客将向您介绍如何使用CSS来创建一个容器上下浮动的动画效果。

准备工作

在开始之前，您需要一个基本的HTML结构来放置容器和相关的元素。以下是一个简单的例子：

<div class="container">
   <div class="box"></div>
</div>

CSS样式设置

接下来，我们将使用CSS来设置容器和相关元素的样式，并为其添加动画效果。

.container {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
  animation: floatAnimation 2s ease-in-out infinite;
}

@keyframes floatAnimation {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -100%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

上面的CSS代码中，我们首先设置了包裹容器的样式。容器使用了相对定位（position: relative）和溢出隐藏（overflow: hidden）来确保容器内部的元素可以被包装，并且不会溢出容器。

接着，我们为容器内的元素添加了样式。元素使用了绝对定位（position: absolute）以及平移（transform: translate(-50%, -50%)）来在容器内居中。背景颜色设置为红色（background-color: red）。

然后，我们定义了名为floatAnimation的关键帧动画。该动画使用了translate函数来实现上下浮动的效果。动画从初始位置（0%）开始，将元素向上移动（translate(-50%, -100%)），然后返回到初始位置（100%）。

最后，我们将动画应用于元素的animation属性中，并设置了动画的持续时间为2秒（animation: floatAnimation 2s ease-in-out infinite），以及循环无限次（infinite）。

效果演示

有了上述HTML和CSS设置，我们现在可以在浏览器中看到容器上下浮动的动画效果了。点击这里查看效果演示。

总结

通过使用CSS的关键帧动画，我们可以轻松地为容器添加上下浮动的动画效果。这种效果可以增加网页的吸引力，并提供一种独特的交互体验。

希望您通过本篇博客学到了一些有关CSS动画的知识并能够将其应用到自己的项目中。谢谢阅读！

本文来自极简博客，作者：编程之路的点滴，转载请注明原文链接：CSS - 容器上下浮动动画