我正在开发一个移动端优先的项目,这个项目只使用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>