github

使用SVG，让渐变的背景也能动起来

当背景是渐变色时，如果想实现过渡动画。直接使用css的transition是不行的。所以考虑使用svg来实现功能。

代码演示

实现的效果：

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .btn {
      padding: 0;
      width: 120px;
      height: 50px;
      font-size: 26px;
      background-color: transparent;
      border: none;
      outline: none;
      cursor: pointer;
    }

    .space {
      width: 100%;
      height: 100%;
    }

    .btn-text {
      pointer-events: none;
    }

    .svg {
      display: block;
    }
  </style>
</head>
<body>
<button class="btn" type="button">
  <svg class="space svg" id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- 过渡动画模板1，过渡动画 -->
    <linearGradient id="linear_gradient_0" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="#13f5ff">
        <animate attributeName="stop-color"
          from="#13f5ff"
          to="#fff713"
          dur=".3s"
          repeatCount="1"
          fill="freeze"
          begin="svg.mouseover"
        />
      </stop>
      <stop offset="100%" stop-color="#0017c0">
        <animate attributeName="stop-color"
          from="#0017c0"
          to="#ff0005"
          dur=".3s"
          repeatCount="1"
          fill="freeze"
          begin="svg.mouseover"
        />
      </stop>
    </linearGradient>

    <!-- 过渡动画模板2，还原动画 -->
    <linearGradient id="linear_gradient_1" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="#fff713">
        <animate attributeName="stop-color"
          from="#fff713"
          to="#13f5ff"
          dur=".3s"
          repeatCount="1"
          fill="freeze"
          begin="svg.mouseout"
        />
      </stop>
      <stop offset="100%" stop-color="#ff0005">
        <animate attributeName="stop-color"
          from="#ff0005"
          to="#0017c0"
          dur=".3s"
          repeatCount="1"
          fill="freeze"
          begin="svg.mouseout"
        />
      </stop>
    </linearGradient>

    <!-- 文字动画1 -->
    <linearGradient id="linear_gradient_2" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="#ff00ff">
        <animate attributeName="stop-color"
          from="#ff00ff"
          to="#4dff27"
          dur=".3s"
          repeatCount="1"
          fill="freeze"
          begin="svg.mouseover"
        />
      </stop>
      <stop offset="100%" stop-color="#f9ff7c">
        <animate attributeName="stop-color"
          from="#f9ff7c"
          to="#b29fff"
          dur=".3s"
          repeatCount="1"
          fill="freeze"
          begin="svg.mouseover"
        />
      </stop>
    </linearGradient>

    <!-- 文字动画2，还原动画 -->
    <linearGradient id="linear_gradient_3" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="#4dff27">
        <animate attributeName="stop-color"
          from="#4dff27"
          to="#ff00ff"
          dur=".3s"
          repeatCount="1"
          fill="freeze"
          begin="svg.mouseout"
        />
      </stop>
      <stop offset="100%" stop-color="#b29fff">
        <animate attributeName="stop-color"
          from="#b29fff"
          to="#f9ff7c"
          dur=".3s"
          repeatCount="1"
          fill="freeze"
          begin="svg.mouseout"
        />
      </stop>
    </linearGradient>

    <g>
      <rect class="space" id="background-rect" fill="url(#linear_gradient_0)" />
      <text class="btn-text"
        id="background-text"
        x="50%"
        y="50%"
        text-anchor="middle"
        dominant-baseline="middle"
        fill="url(#linear_gradient_2)"
      >
        Button
      </text>
    </g>

    <!-- 脚本 -->
    <script type="text/javascript">
      <![CDATA[
      const svg = document.getElementById('svg'),
        rect = document.getElementById('background-rect'),
        text = document.getElementById('background-text');

      // 鼠标移入时
      function handleBackgroundMouseOver(event) {
        // 使用setTimeout防止动画闪烁
        setTimeout(function() {
          rect.setAttribute('fill', 'url(#linear_gradient_0)');
          text.setAttribute('fill', 'url(#linear_gradient_2)');
        }, 0);
      }

      // 鼠标移出时
      function handleBackgroundMouseOut(event) {
        // 使用setTimeout防止动画闪烁
        setTimeout(function() {
          rect.setAttribute('fill', 'url(#linear_gradient_1)');
          text.setAttribute('fill', 'url(#linear_gradient_3)');
        }, 0);
      }

      svg.addEventListener('mouseover', handleBackgroundMouseOver, false);
      svg.addEventListener('mouseout', handleBackgroundMouseOut, false);
      // ]]>
    </script>
  </svg>
</button>
</body>
</html>