js流动噪波效果js流动噪波效果，css渐变+filter+svg 噪波滤镜，部分低版本浏览器不兼容，请使用谷歌浏览器

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js噪波</title>
    <style>

      body,
      html {
        width: 100%;
        height: 100%;
        margin: 0;
        background: #0b1a3a;
      }

      .g-wrap {
        position: relative;
        margin: auto;
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* border-radius: 50px; */
        opacity: 0.25;

        &::before {
          content: "";
          position: absolute;
          width: 1px;
          height: 1px;
        }
      }

      .g-aurora {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;


        &::before {
          content: "";
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #fff;
          background: radial-gradient(
            ellipse at var(--x) var(--y),
            rgba(30, 76, 134, 1) 0%,
            rgba(76, 206, 150, 1) 15%,
            rgba(30, 76, 134, 1) 30%,
            rgba(76, 206, 150, 1) 45%,
            rgba(30, 76, 134, 1) 60%,
            rgba(76, 206, 150, 1) 75%,
            rgba(30, 76, 134, 1) 100%
          );
          filter: url(#wave);
          mix-blend-mode: normal;
          transform: rotate(0) scaleY(1.5) scaleX(1.5);
        }
      }

      svg {
        width: 0;
        height: 0;
      }
    </style>
  </head>
  <body>
    <div class="g-wrap">
      <div class="g-aurora"></div>
    </div>

    <svg id="blob" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="wave">
          <feturbulence
            basefrequency="0.0510 0.1099"
            id="turbulence"
            numoctaves="3"
            result="noise"
            seed="10"
          />
          <fedisplacementmap
            id="displacement"
            in2="noise"
            in="SourceGraphic"
            scale="100"
          />
        </filter>
      </defs>
    </svg>
    <script>
      var filter = document.querySelector("#turbulence");
      var frames = 0;
      var rad = Math.PI / 180;
      var lastTime = 0;
      var fpsInterval = 1000 / 60; // 30 FPS
      const aurora = document.querySelector(".g-aurora");

      let x = 100;
      let y = 100;

      function freqAnimation(time) {
        // 控制更新频率
        // if (time - lastTime >= fpsInterval) {
        lastTime = time;

        var bfx = 0.005;
        var bfy = 0.005;
        frames += Math.random() * 0.8;
        bfx += +(0.0025 * Math.cos(frames * rad)).toFixed(8);
        bfy += +(0.0025 * Math.sin(frames * rad)).toFixed(8);

        var bf = bfx.toString() + " " + bfy.toString();
        filter.setAttributeNS(null, "baseFrequency", bf);

        let directionX = (Math.random() - 0.5) * 0.25;
        let directionY = (Math.random() - 0.5) * 0.35;
        x += directionX;
        y += directionY;

        aurora.style.setProperty("--x", `${x}%`);
        aurora.style.setProperty("--y", `${y}%`);
        // }

        window.requestAnimationFrame(freqAnimation);
      }


    </script>
  </body>
</html>
效果展示，部分低版本浏览器不兼容，请使用谷歌浏览器截屏2024-07-19 17.09.03.png