让我来告诉你怎样用CSS实现心形动画

前言

“不是井里没有水，而是你挖的不够深。不是成功来得慢，而是你努力的不够多。”

示例

• CSS

html,
body {
    margin: 0;
    height: 100vh;
    /* 溢出便隐藏 */
    overflow: hidden;
}

body {
    background: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2610366627,3948210494&fm=26&gp=0.jpg) ;
}

.container{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 100px ;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

span {
    position: absolute;
    width: 10vmin;
    height: 10vmin;
    /* 调色盘 */
    
    border-radius: 50%;
    font-size: 6vmin;
    margin-left: 300px;
    color: brown;
}

• HTML

<div class="box">
     <container></container>
</div>

• JS

if (document.body.animate) {
    const container = document.querySelector("container");

    for (let i = 0; i < 300; ++i) {
        const span = document.createElement("span");
        const x1 = Math.random() * 100;
        const x2 = Math.random() * 100;
        const y1 = Math.random() * 100;
        const y2 = Math.random() * 100;
        const r1 = Math.random();
        const r2 = Math.random();
        const ss1 = Math.random();

        const tx1 = Math.random() * 100;
        const tx2 = Math.random() * 100;
        const ty1 = Math.random() * 100;
        const ty2 = Math.random() * 100;
        const tr1 = Math.random();
        const tr2 = Math.random();
        const ts1 = Math.random();

        span.style.setProperty("--h", Math.random() * 360);

        span.animate({
            transform: [
                `translate(${x1}vmin,${y1}vmin) rotate(${r1}turn) scale(${ss1}) rotate(${r2}turn) translate(${x2}vmin,${y2}vmin)`,
                `translate(${tx1}vmin,${ty1}vmin) rotate(${tr1}turn) scale(${ts1}) rotate(${tr2}turn) translate(${tx2}vmin,${ty2}vmin)`
            ]
        }, {
            iterations: Infinity,
            duration: Math.random() * 4300 + 4300,
            direction: "alternate",
            easing: "ease-in-out"
        });
        span.textContent = "❤";
        container.appendChild(span);
    }

    container.animate({
        transform: ["scale(0)", "scale(1)"]
    }, {
        duration: 20000,
        easing: "ease-out"
    });
}

• 效果
  点击链接查看完整效果
  图1

总结

重点在JS部分，在编写的同学可以注意下。
上一篇没看的同学可以点击链接查看 教你用三分钟写一个动画

(本文适合初学者，如果你是大佬级别的人物，我也欢迎指教！)