如何使用纯 CSS 与 HTML 创建动画漂浮心形效果

Source: Dev.to

1. HTML 结构

标记非常简单：一个充当“天空”的包装器以及一组 <div class="heart"> 元素，这些元素会变成心形。
包装器必须设置 position: relative; 和 overflow: hidden;，这样心形才会被限制在内部，并在离开顶部边界时平滑消失。

<div class="sky">
    <div class="heart x1"></div>
    <div class="heart x2"></div>
    <div class="heart x3"></div>
    <!-- add more hearts as needed -->
</div>

<h2>Our customers love us!</h2>

2. 用纯 CSS 绘制心形

心形只需一个元素及其 ::before 和 ::after 伪元素即可实现。
该技巧先构建一个正方形，然后添加两个重叠的胶囊形圆形。

.heart {
    position: relative;
}

/* 心形的上半部分 */
.heart::before,
.heart::after {
    position: absolute;
    content: "";
    left: 18px;
    top: 0;
    width: 18px;
    height: 30px;
    background: #CC2022;               /* 心形颜色 */
    border-radius: 30px 30px 0 0;      /* 胶囊形状 */
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

3. 创建运动（关键帧）

心形需要 向上漂浮 并 左右摇摆 同时进行。两个关键帧动画负责此效果：

/* 垂直移动 */
@keyframes moveclouds {
    0%   { top: 500px; }
    100% { top: -500px; }
}

/* 水平摇摆 */
@keyframes sideWays {
    0%   { margin-left: 0px; }
    100% { margin-left: 50px; }
}

4. 添加多样性

如果所有心形的行为完全相同，效果会显得机械。通过为不同的类（.x1 … .x16）分配不同的尺寸、透明度、水平起始位置和动画速度，可以让它们各不相同。

/* 小、半透明、快速 */
.x1 {
    left: 5%;
    transform: scale(0.9);
    opacity: 0.6;
    animation:
        moveclouds 15s linear infinite,
        sideWays   4s ease-in-out infinite alternate;
}

/* 较大、更不透明、较慢 */
.x2 {
    left: 25%;
    transform: scale(0.6);
    opacity: 0.9;
    animation:
        moveclouds 25s linear infinite,
        sideWays   5s ease-in-out infinite alternate;
}

/* 右侧非常快速的心形 */
.x5 {
    left: 88%;
    transform: scale(0.8);
    opacity: 0.3;
    animation:
        moveclouds 7s linear infinite,
        sideWays   1s ease-in-out infinite alternate;
}

这些属性的作用

• left – 在容器内水平分布心形。
• transform: scale() – 调整大小以产生深度感（视差效果）。
• opacity – 通过淡化远处的心形来控制感知距离。
• animation – 使用类特定的持续时间同时运行垂直和水平动画，从而呈现有机、随机的外观。

结论

将心形放入带有 overflow: hidden 的容器中，就能获得轻量且视觉上令人愉悦的漂浮心形效果，并且不会影响性能。该代码可以适配任何框架（例如 Alpine.js），也可以通过更改背景颜色、动画速度或心形实例数量来自定义。

祝编码愉快！