动态 SVG 径向渐变动画

前言：

前段时间看到这种动态SVG渐变效果看上去很舒服，今天抽出来时间试了一下，看着还不错。文章中没有放GIF图片，试了一下太掉帧了，直接放了静态图片了，想看效果的自己建一个index.html试一下就行。

话不多说直接上图和代码

演示图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>奶狗演示页面</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden; 
    }

    svg {
      width: 100%;
      height: 100%;
      position: absolute; z-index: -1;
    }

    @media (max-width: 768px) {
      svg {
        width: 100vw;
        height: 100vh;
        position: absolute; z-index: -1;
      }
    }

    /* 添加磨砂效果 */
    svg::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
    }
  </style>
</head>

<body>
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
    <defs>
      <radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
        <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
        <stop offset="0%" stop-color="#ff0" />
        <stop offset="100%" stop-color="#ff00" />
      </radialGradient>
      <radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
        <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
        <stop offset="0%" stop-color="#0ff" />
        <stop offset="100%" stop-color="#0ff0" />
      </radialGradient>
      <radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
        <animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
        <stop offset="0%" stop-color="#f0f" />
        <stop offset="100%" stop-color="#f0f0" />
      </radialGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">
      <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
      <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
      <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite" />
    </rect>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)">
      <animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
      <animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
      <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite" />
    </rect>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">
      <animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
      <animate attributeName="y" dur="26s" values="0%;25%;0%" repeatCount="indefinite" />
      <animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite" />
    </rect>
  </svg>
  <div class="child"></div>
</body>

</html>

文件下载

112212131313131313131313131313131313下载