html - 在 CSS 动画中使用线性渐变

Question

我正在从事移动优先元素，这是一个仅使用 HTML 和 CSS 的元素，让我们可以学习如何仅使用 CSS 制作动画。我的元素有问题，希望您能帮助我。

我试图用线性渐变颜色代替我在代码中使用的##9356DC 来填充心形。问题是，每次我使用线性渐变时，心脏都不再填充任何颜色。

在此先感谢您为我提供的所有帮助!

.icon {
  fill: transparent;
  stroke: black;
  stroke-width: 50;
  cursor: pointer;
  position: absolute;
  right: 1.5rem;
  bottom: 2rem;
}

.icon svg {
  overflow: visible;
  width: 1.6rem;
}

.icon .heart-main:active path {
  animation: fill-animation 1.5s ease-in-out forwards;
  stroke: #9356DC;
}

@keyframes fill-animation {
  10% {
    fill: #9356DC;
  }
  80% {
    fill: #9356DC;
  }
  100% {
    fill: #9356DC;
  }
}

<div class="icon">
   <svg class="heart-main" viewBox="0 0 512 512" width="100" title="heart">
      <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
   </svg>
</div>

Answer 1

要填充 linear-gradient，您必须在 SVG 文件的定义部分添加 linearGradient 节点，如下所示:( Read More about Linear Gradient )

<defs>
    <linearGradient id="FillGradient" gradientTransform="rotate(90)">
      <stop offset="2%" stop-color="#FFF" />
      <stop offset="95%" stop-color="#9356DC" />
    </linearGradient>
</defs>

确保您正在添加 id 属性，该属性将在 CSS 中用于填充渐变，如下所示:

@keyframes fill-animation {
  0%{
     fill-opacity: 0.1;
  }
  10% {
     fill: url(#FillGradient);
     fill-opacity: 0.1;
  }
  80% {
     fill: url(#FillGradient);
     fill-opacity: 1;
  }
  100% {
     fill: url(#FillGradient);
     fill-opacity: 1;
  }
}

您可以删除 fill-opacity，当然也可以根据需要更改 linearGradient 节点中的渐变颜色。

请参阅下面的工作片段:(我评论了一些样式只是为了让它大而清晰)

.icon {
  fill: transparent;
  stroke: black;
  stroke-width: 50;
  cursor: pointer;
 /* position: absolute;
  right: 1.5rem;
  bottom: 2rem;*/
}

.icon svg {
  overflow: visible;
  width: 5.6rem; /* changed from 1.6 to 5.6 */
}

.icon .heart-main:active path {
  animation: fill-animation 1.5s ease-in-out forwards;
  stroke: #9356DC;
}

@keyframes fill-animation {
  0%{
     fill-opacity: 0.1;
  }
  10% {
     fill: url(#FillGradient);
     fill-opacity: 0.1;
  }
  80% {
     fill: url(#FillGradient);
     fill-opacity: 1;
  }
  100% {
     fill: url(#FillGradient);
     fill-opacity: 1;
  }
}

<div class="icon">
   <svg class="heart-main" viewBox="0 0 512 512" width="300" title="heart">
      <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
      <defs>
        <linearGradient id="FillGradient" gradientTransform="rotate(90)">
          <stop offset="2%" stop-color="#FFF" />
          <stop offset="98%" stop-color="#9356DC" />
        </linearGradient>
      </defs>
   </svg>
</div>