css上下移动图片代码

在网站设计中，使用图片来装饰页面是非常常见的。不过有时候，我们不仅仅需要显示静态的图片，还需要让它们动态起来。在这方面，CSS就提供了一些可实现这一目的的技巧。

一个非常简单、常见的动画就是让图片上下移动。下面是一个CSS的实现代码，你可以将其中的 "image-url" 替换成你自己的图片链接。

img{
  position: relative;
  animation-name: up-down;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes up-down {
  0% {
    top: 0px;
  }
  100% {
    top: 20px;
  }
} 

这段代码使用了 "@keyframes" 规则来定义动画，代码中 "up-down" 为动画名称。 "animation-duration: 3s;" 规则指明动画持续时间为3秒， "animation-iteration-count: infinite;" 则指定动画重复执行次数为无限次。 "animation-direction: alternate;" 规则代表动画会正向然后反向地执行， "animation-timing-function: ease-in-out;" 指明了动画的缓动函数。

最后，我们通过指定 "top" 的值来制定元素上下移动的距离。动画效果类似于从初始位置到20像素的距离之间来回反弹。

现在可以在你的网站上使用这段CSS代码来让你的图片动起来吧！记住，在实际应用中，你还可以使用其他的CSS规则来添加更多的效果和样式。