心形css3的脉动效果答案

【问题标题】：Pulsate effect for the heart shape css3心形css3的脉动效果
【发布时间】：2020-12-17 09:18:44
【问题描述】：

我正在尝试实现类似于以下的脉动效果

由于上面的代码只适用于圆形或方形，有没有什么方法可以为 svg 心形实现相同的效果？

<svg class="heart" preserveAspectRatio="xMidYMid meet" viewbox="0 0 20 20"><path d="M8.612,2.347L8,2.997l-0.612-0.65c-1.69-1.795-4.43-1.795-6.12,0c-1.69,1.795-1.69,4.706,0,6.502l0.612,0.65L8,16  l6.12-6.502l0.612-0.65c1.69-1.795,1.69-4.706,0-6.502C13.042,0.551,10.302,0.551,8.612,2.347z" fill="#fff" transform="scale( 0.954929658551372 )"></path></svg>

【问题讨论】：

心跳动画：youtu.be/Jq4diUd10Zs

标签： html css animation svg

【解决方案1】：

另一种方法是为笔画宽度设置动画。

svg {
  width: 40px;
  margin: 40px;
  overflow: visible;
}

use {
  stroke: red;
  opacity: 0;
  animation: pulsing 1000ms ease-out infinite;
}

@keyframes pulsing {
  from {
    opacity: 0.5;
    stroke-width: 0;
  }
  to {
    opacity: 0;
    stroke-width: 12px;
  }
}

.element {
  animation: pulsing 1000ms ease-out;
}

<svg class="heart" preserveAspectRatio="xMidYMid meet" viewbox="0 0 20 20">
  <use xlink:href="#shape"/>
  <path id="shape" d="M8.612,2.347L8,2.997l-0.612-0.65c-1.69-1.795-4.43-1.795-6.12,0c-1.69,1.795-1.69,4.706,0,6.502l0.612,0.65L8,16  l6.12-6.502l0.612-0.65c1.69-1.795,1.69-4.706,0-6.502C13.042,0.551,10.302,0.551,8.612,2.347z" fill="#f00" transform="scale( 0.954929658551372 )"></path>
</svg>

【讨论】：

【解决方案2】：

最快的解决方法是将box-shadow 换成filter: drop-shadow。这适用于任意形状。

不过，这个解决方案并不理想； box-shadow / drop-shadow 制作动画成本很高。相反，您可以使用transform: scale 和opacity，例如：

@keyframes pulsing {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

.element {
  animation: pulsing 1000ms ease-out;
}

【讨论】：