[分享]css3图片上下浮动

CSS3是一种强大的样式语言，可以用它来控制网页的布局和样式。其中一个很酷的功能是，我们可以使用CSS3来控制图片的动画效果。下面我们就来学习一下CSS3图片上下浮动的效果。/ 图片浮动样式 / im...

CSS3是一种强大的样式语言，可以用它来控制网页的布局和样式。其中一个很酷的功能是，我们可以使用CSS3来控制图片的动画效果。下面我们就来学习一下CSS3图片上下浮动的效果。

/* 图片浮动样式 */
img {
  position: relative;
  animation-name: float;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* 动画 */
@keyframes float {
  from {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  to {
    transform: translateY(0);
  }
} 

首先，我们需要给图片一个相对定位，否则浮动效果不会生效。然后我们定义了一个名为float的动画，包含了三个关键帧。from是初始状态，我们将图片的Y轴偏移量设置为0。50%是中间状态，这里我们将图片的Y轴偏移量设置为-15px，让图片向上浮动一些。to是最终状态，将图片的Y轴偏移量再次设为0，让图片回到原来的位置。接下来，我们将动画绑定到图片上，设置动画的时间、运动次数和运动速度，然后通过animation-timing-function属性来指定动画在整个过程中的变化速度。

最后，我们在HTML文件中引用CSS文件，并将相应的样式应用到图片上，即可实现图片上下浮动的效果。以上就是CSS3图片上下浮动的基本原理，希望对大家有所帮助。