css上下运动如何写

CSS上下运动在网页设计中是常用的一种效果，例如网站的首页Banner图常常会使用这种效果来吸引用户的注意力。下面我们就来了解一下如何使用CSS来实现上下运动效果。

/* 首先定义一个包含上下运动的动画效果 */
@keyframes moveUpDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}

/* 定义一个样式类来实现上下运动 */
.move-up-down {
  animation: moveUpDown 0.5s ease-in-out infinite alternate;
} 

代码中定义了一个基本的上下运动动画效果，使用关键词@keyframes来定义一项动画，这里我们定义了一个moveUpDown动画，并通过from和to来分别定义起始和结束状态，使用transform: translateY()来实现垂直方向位移。

接着定义了一个move-up-down样式类来应用这个动画效果。其中，我们使用animation属性来指定动画的名称、持续时间、缓动效果等参数，通过infinite alternate参数来让动画无限循环来实现不断上下移动的效果。

最后，在需要使用上下运动效果的HTML元素中添加上move-up-down样式类即可实现上下运动效果，例如：

<div class="move-up-down">
  <p>我是一段需要上下运动的文字</p>
</div> 

添加上样式类后，<div>元素内的文本将会不断上下运动。