CSS 实现元素周期上下移动动画 - 完整教程和代码示例

可以使用 CSS 中的动画 (animation) 和 transform 属性实现元素的周期上下移动。

1. 首先，需要使用 CSS 的 transform 属性来定义元素的初始位置和移动距离。例如，可以使用 translateY() 方法定义元素在 Y 轴方向上的移动距离。

2. 接着，使用 CSS 中的动画属性定义元素的周期性移动。可以使用 @keyframes 规则来定义动画的关键帧，设置元素在不同时间点上的位置和状态。

3. 最后，将动画应用到元素上，使用 animation 属性指定动画的名称、时间和循环次数等参数。

以下是一个示例代码，实现了一个元素在页面上周期性上下移动的效果：

html 代码：

<div class='box'></div>

CSS 代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: moveUpDown 2s ease-in-out infinite;
}

@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}

解释：

1. 首先定义了一个宽高为 100px 的红色矩形，并将其定位为相对位置。

2. 在 @keyframes 规则中定义了一个名为 moveUpDown 的动画，指定了元素在不同时间点上的位置和状态。在 0% 时间点上，元素的位置为初始位置，即 Y 轴方向上为 0。在 50% 时间点上，将元素在 Y 轴方向上移动 50px。在 100% 时间点上，元素回到初始位置。

3. 最后，在 .box 元素上使用 animation 属性，将 moveUpDown 动画应用到元素上，并指定了动画的执行时间为 2 秒，动画函数为 ease-in-out，循环次数为 infinite，即无限循环。这样，元素就会周期性上下移动。