css 图片一上一下动的效果

CSS是一门强大的网页设计语言，可以实现诸如动态效果之类的功能，其中之一便是图片上下弹动的效果。下面介绍一段CSS代码，可以实现图片一上一下动的效果。

  .img {
    position: relative;
    animation: move 1s infinite alternate;
    animation-timing-function: cubic-bezier(0.5,0.05,0.1,0.3);
  }

  @keyframes move {
    from {
      top: 0px;
    }
    to {
      top: 20px;
    }
  }

以上代码中，我们先给图片的父容器设置了“relative”的定位属性，这是为了让图片相对于其父容器进行上下移动。然后我们通过CSS3中的“动画”属性，来制造图片上下弹动的效果。其中，“move”是我们定义的动画名，“1s”是动画的执行时间，“infinite”表示动画无限循环执行，“alternate”表示动画交替改变方向执行。

在动画定义代码块中，我们使用“from”和“to”来分别定义动画起点和终点的状态，此时图片被放置在原先的位置。接着，我们设置“top: 20px;”来表示图片向下移动20像素。然后，动画会在另外一个状态循环执行时，从“to”状态变为“from”状态，然后图片会变回起点位置。

最后，我们使用"cubic-bezier"函数定义了动画的时间函数，让动画看起来更加流畅，让用户体验更好。我们可以根据自己的需求调整这个函数来获得不同的效果。

上述CSS代码可以实现一个简单的图片一上一下动的效果，我们可以将其应用于各种图片展示场合，如轮播图、滚动新闻等方面。希望这篇文章对你的工作有所帮助。