需要注意一点，当背景图片尺寸大于一屏宽度时，需要把图片宽度的设置成50%，才能实现平滑过渡，不然会有闪现的问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wave-container {
        position: relative;
        width: 100%;
        height: 100vh;
        background-color: #f0f0f0;
        overflow: scroll;
      }
      .wave {
        width: 200%;
        height: 200px;
        background-image: url("https://i-blog.csdnimg.cn/blog_migrate/0f84adca4a6055755698d8802803d9a7.png");
        background-repeat: repeat no-repeat;
        background-size: 50% 50%;
        animation: move_wave 5s linear infinite;
        opacity: 0.5;
        position: absolute;
      }
      .wave2 {
        animation: move_wave 6s linear infinite;
        animation-delay: 1s;
        top: 3px;
        background-image: url("https://i-blog.csdnimg.cn/blog_migrate/34734b52eb310f891ab53b5ca8342634.png");
      }
      .wave3 {
        animation: move_wave 7s linear infinite;
        animation-delay: 0.5s;
        top: 10px;
        background-image: url("https://i-blog.csdnimg.cn/blog_migrate/0173d057ac0c2fe8619e130e47d9ef7d.png");
      }

      @keyframes move_wave {
        0% {
          transform: translateX(0) scaleY(1);
        }
        50% {
          transform: translateX(-25%) scaleY(0.55);
        }
        100% {
          transform: translateX(-50%) scaleY(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="wave-container">
      <div class="wave"></div>
      <div class="wave wave2"></div>
      <div class="wave wave3"></div>
    </div>
    <script></script>
  </body>
</html>

# css # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

cover

李建忠：智能体正将互联网从信息网络重构为行动网络

avatar 腾讯云开发者社区
cover

探秘 DeepSeek 落地进展，腾讯云携手业界专家共话 AI 生产力

avatar 腾讯云开发者社区
cover

腾讯云 TVP 走进三一集团，揭秘 AI+DeepSeek 工业智造新未来

avatar 腾讯云开发者社区