html中如何设置图片飘动

在HTML中，要实现图片飘动的效果，可以使用CSS中的animation属性来实现。

img {
  position: absolute;
  animation: floating 4s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(0,15px);
  }
  100% {
    transform: translate(0,-15px);
  }
}

首先，我们需要将图片的位置设置为absolute，这样图片就可以在页面中自由移动。

然后，我们需要在图片的CSS中加入动画的属性：animation: floating 4s ease-in-out infinite;，其中，floating表示动画名称，4s表示动画时长，ease-in-out表示动画变化速度，infinite表示无限循环播放。

最后，在CSS中使用@keyframes来设置动画的关键帧变化，实现图片上下移动的效果。

@keyframes floating {
  0% {
    transform: translate(0,-15px);
  }
}

在上述代码中，我们设置了三个关键帧：

• 0%：图片初始状态，即不移动
• 50%：图片上移15像素
• 100%：图片下移15像素

这样，我们就实现了图片飘动的效果。