效果：
代码：
HTML </>
<div><svg><!-- 折线路径 --><path class="st0" d="M319,337c0,0-20.03-3.67-28,13c0,0,4.82,16.81,32,13l27,7l17-26l32,45l20-26l28,2l10-1c0,0,23.38-0.18,28-14c0,0-1.81-16-27-13"/><!-- 爱心路径 --><path class="st1" d="M388,328c0,0-11.67-21.64-35-19c-23.33,2.64-29.91,21.29-32,29c-2.09,7.71,0,28.08,10,38s30.89,30.92,57,49c0,0,24.75-13.95,58-50c0,0,15.64-17.61,11-35c0,0-1.49-30-34-30C423,310,407.59,305.53,388,328z"/></svg></div>
CSS </>
关键代码：
ffill: none; 闭环路径填充（颜色等）；
stroke-width: 5px; 路径的粗细；
stroke-linecap: round;
stroke-linejoin: round;路径顶点处的样式；stroke: #dd5969;路径颜色stroke-dasharray: 0,322; 路径长度；stroke-dashoffset: 0; 路径偏移量；
注意⚠️：由于此路径数据起始位置不在左上角；此处因此使用定位。
<style>body {background-color: #000;}div {margin: 200px auto;position: relative;width: 200px;height: 200px;animation: scale 3s linear infinite;}svg {position: absolute;left: -288px;top: -300px;width: 600px;height: 600px;}path {fill: none;stroke-width: 5px;stroke-linecap: round;stroke-linejoin: round;stroke: #dd5969;}.st0 {stroke-dasharray: 0, 322;stroke-dashoffset: 0;/* 保留最后一帧 */animation: run 2s infinite forwards;}@keyframes run {0% {stroke-dasharray: 0,322;}100% {stroke-dasharray: 322,322;}}@keyframes scale {0% {transform: scale(1);}42% {transform: scale(1);}46% {transform: scale(1.2);}50% {transform: scale(1);}54% {transform: scale(1.2);}58% {transform: scale(1);}/* 100% {transform: scale(1);} */}</style>
JavaScript </>
注意⚠️：我们一开始不知道路径长度，使用getTotalLength()方法可以轻松获取！
<script>var path = document.querySelector("path");console.log(path.getTotalLength()); // 332</script>
如果觉得《SVG实现网易云心动动画（HTML+CSS）》对你有帮助，请点赞、收藏，并留下你的观点哦！
