css上下动的动画效果

当我们需要页面上一些元素有一定的动画效果时，CSS提供了一些简单而又好用的动画效果。其中上下动的效果是我们经常需要用到的，接下来我们就来学习一下如何使用CSS实现上下动的效果。

/*先定义需要添加动画效果的元素*/
.box{
  position: relative;
  top: 0; /*初始top值为0*/
  animation: updown 1s infinite alternate; /*应用上下动的动画效果*/
}

/*定义动画效果*/
@keyframes updown{
  0%{
    top: 0; /*开始位置为0*/
  }
  100%{
    top: 20px; /*结束位置为20px*/
  }
} 

上述代码中，我们首先定义了要添加动画效果的元素，这里我们假设元素的类名为“box”。接着，我们定义了一个名为“updown”的动画效果。在这个动画效果中，我们使用了@keyframes来定义动画的起始和结束状态，这里我们把起始位置设为0，结束位置设为20px。在最后，我们通过animation属性将定义好的动画效果“updown”应用到我们的元素上，并设置了动画的持续时间为1秒，无限循环，并交替进行。

通过上述代码，我们就成功地实现了一个简单的上下动的动画效果。在实际使用中，我们也可以根据需要修改动画效果的起始和结束状态，来实现更加丰富的动画效果。同时，CSS提供了很多不同的动画效果，如左右动、“zoom in”等，通过学习和运用这些动画效果，我们可以让页面更加生动有趣。