SVG实现网易云心动动画（HTML+CSS）

效果：

代码：

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-14
	c0,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,49
	c0,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>