css 图片上下移动位置

今天我来介绍一下如何使用CSS来实现图片上下移动位置的效果。首先，我们需要在HTML中添加一个图片元素，并给它一个唯一的ID。比如：

<img src="example.jpg" id="my-image" alt="example" />

接下来，我们需要使用CSS来定位这个图片，让它能够在页面上自由移动。比如：

css 图片上下移动位置

p {
  position: relative;
  height: 300px;
}

#my-image {
  position: absolute;
  bottom: 0;
}

上面的代码中，我们给包含图片的元素设置了一个相对定位，同时设置了一个高度。然后，我们给图片元素设置了一个绝对定位，并将它的bottom属性设置为0。这样，图片就会位于元素的底部。接下来，我们可以使用CSS动画来使图片上下移动。比如：

#my-image {
  animation: move-up-down 2s ease infinite;
}

@keyframes move-up-down {
  0% {
    transform: translate(0,0);
  }
  
  50% {
    transform: translate(0,20px);
  }
  
  100% {
    transform: translate(0,0);
  }
}

上面的代码中，我们先在图片元素上添加了一个动画。这个动画叫做“move-up-down”，它的持续时间为2秒，运动方式为ease，并且它会无限次重复播放。然后，在动画中，我们定义了三个关键帧。第一个关键帧是从0%到50%，它会将图片向上移动20像素。第二个关键帧是从50%到100%，它会将图片回到起始位置。这样，我们就可以使图片在页面上不断地上下移动了。好了，以上就是使用CSS实现图片上下移动位置的方法。如果你想要实现其他更复杂的效果，可以尝试使用更多的CSS属性和动画效果。祝你实现成功！

css 图片上下移动位置

相关推荐