在CSS动画中使用linear-gradient。

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>

- Mushu

---

我在网上找到了一个CodePen，虽然它是带有文本的，但我认为它可能会对你有所帮助！ CodePen - MrBlender

Answer 1

为了填充线性渐变，您需要在SVG文件的定义部分中添加像下面这样的linearGradient节点：(了解更多关于线性渐变)

<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>

- Nimitt Shah

Answer 2

你可以使用我的代码

        @keyframes value {
        0%{background-image: linear-gradient(90deg, red, purple, green);}
        25%{background-image: linear-gradient(90deg, orange, yellow,blue);}
        50%{background-image: linear-gradient(90deg, black, grey, white);}
        100%{background-image: linear-gradient(90deg,lime,violet,magenta);}
        }

然后使用

       .icon{
        animation-name: value;
        animation-duration: 50s;
        animation-iteration-count: infinite;
        }

你可以使用background-image代替fill，如果那不起作用，你可以使用color。 我希望我能帮到你，但我对CSS还是很新的。

- jk1234