如何使用CSS&；制作跳动的心脏画布；jquery？

我是CSS的新手，Jquery我想用CSS和Jquery创建一个跳动的心脏画布，但是有人能帮我制作这样的心脏吗

使用示例代码发布将非常有用，因此请使用CSS和jquery代码发布

我使用下面的代码来制作跳动的心脏，但这看起来不像是真正的，心脏应该跳动两次。

@关键帧节拍{
0%{变换：比例（1）；}
50%{变换：比例（0.5）；}
100%{变换：比例（1）}
}
.心脏{
宽度：300px；
高度：300px；
动画：拍2s无限线性；
}

简单

html，正文{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
身高：100%；
宽度：100%；
对齐项目：居中；
证明内容：中心；
动画：1.5s无限脉冲；
}
.盒子{
身高：90%；
最大高度：400px；
}
#心{
身高：100%；
左边距：自动；
动画：1.5s，无限拍；
}
@关键帧节拍{
0%，50%，100%{变换：比例（1，1）；}
30%，80%{变换：比例（0.92,0.95）；}
}
@关键帧脉冲{
0%、50%、100%{背景：#费用；}
30%，80%{背景：#fff；}
}

#心脏{中风：url（#径向梯度）}

您可以使用SVG实现这一点，然后通过变换其比例并设置时间间隔使其展开和收缩，使其使用CSS设置动画

我们所需要的只是一个心脏图像，并提供一个。我们不需要他们用来逐渐填满心脏的那一点。相反，我们从一开始就用红色填充路径，将心脏放在div元素中，这样可以方便地移动到想要的位置并调整大小，然后为div提供动画。这将从中心变换

@关键帧节拍{
0%{变换：比例（1）；}
50%{变换：比例（0.5）；}
100%{变换：比例（1）}
}
.心脏{
宽度：300px；
高度：300px；
动画：拍0.5s无限线性；
}

这是可行的，但心跳看起来不像真实的心脏每秒应该跳动两次。你只需改变动画上的计时即可。我改变了它，使动画每半秒出现一次。请参见CSS动画设置的规范。