css上下运动效果如何写

1. 概述

CSS动画可以轻松地添加运动效果到网页上，其中之一就是上下运动效果。本文将介绍如何用CSS实现上下运动效果。首先，让我们了解关于CSS动画的几个重要的CSS属性：

animation-name: 定义动画名称，需要与@keyframes关键帧选择器一起使用。

animation-duration: 定义动画单次运行持续时间。

animation-delay: 定义动画启动前的延迟时间。

animation-iteration-count: 定义动画运行次数。默认值为1，如果设为无限，则动画会一直运行。

animation-direction: 定义动画运动方向。可以是正方向(normal)，也可以是反方向(alternate)。

animation-timing-function: 定义动画运行的速度曲线。可以是线性(linear)，也可以是缓入缓出(ease-in-out)等多种速度曲线。

2. 实现

2.1 概述

实现上下运动效果，我们需要先定义两个CSS关键帧选择器@keyframes：

  @keyframes up {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-50px);
    }
  }
  @keyframes down {
    from {
      transform: translateY(-50px);
    }
    to {
      transform: translateY(0);
    }
  }

这里我们定义了两个关键帧选择器，一个用于向上运动，一个用于向下运动。我们使用transform:translateY()属性来实现上下运动。

2.2 完整代码

下面是完整的CSS代码，其中.box为我们需要添加上下运动效果的元素。

.box {
  width: 100px;
  height: 50px;
  background-color: #F00;
  position: relative;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.box.up {
  animation-name: up;
}
.box.down {
  animation-name: down;
}

在这段代码中，我们定义了.box样式，用于控制元素的基本属性。其中animation-duration，animation-iteration-count，animation-direction，animation-timing-function这些属性用来控制动画的属性。我们还定义了两个类.up和.down，用来添加上升和下降运动效果。具体实现代码如下：

  <div class="box up"></div>
  <div class="box down"></div>

这里，我们在两个box标签上分别添加.up和.down类，来实现元素的上下运动。

2.3 实现效果

下面是我们实现的上下运动效果：

3. 总结

在本文中，我们介绍了如何用CSS实现上下运动效果。首先，我们了解了几个关键的CSS动画属性；然后，我们定义了两个关键帧选择器，来实现元素的上下运动；最后，我们通过完整代码和实现效果帮助大家更好地理解如何实现这个效果。希望这篇文章能对CSS初学者有所帮助。