[分享]css一张图片反复波动

CSS 是我们日常开发中必须掌握的技能之一。今天，我想和大家分享如何通过 CSS 让一张图片反复波动。

 .wave {
    position: relative;
    animation-name: waveAnimation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes waveAnimation {
    0% {
      transform: translateX(0) scale(1, 1);
      opacity: 1;
    }
    50% {
      transform: translateX(100%) scaleY(0.5);
      opacity: 0.5;
    }
    100% {
      transform: translateX(200%) scale(1, 1);
      opacity: 1;
    }
  } 

在代码中，我们创建了一个名为 wave 的 CSS 类，这个类将被应用于要波动的图片上。它设置了动画属性，包括动画名称，持续时间和迭代次数。动画函数设置为线性，以使波浪效果更平滑。

接下来，我们使用 @keyframes 规则来定义波动动画的帧。在 0% 帧中，我们将图片的平移和缩放重置为正常大小，透明度为 1。在 50% 帧中，我们通过 transform 属性将图片水平移动 100% 并垂直压缩 50%，使图片呈现波浪形状。透明度相应地减少到 0.5。在 100% 帧中，我们将图片平移 200%，使其回到其初始位置，透明度恢复为 1。

最后，将 HTML 中的图片元素添加一个 class 为 wave 的类名即可。这样，这张图片就会不停地波动起来了。

以上就是关于 CSS 如何让一张图片反复波动的实现方法和代码示例。相信大家通过学习这个例子，能对 CSS 动画有更深入的理解和运用。