用 CSS 演绎浪漫：从零构建“亲吻动画”全流程解析

前言：CSS 不只是"样式"，更是"表达"

你是否认为 CSS 只是用来排版和配色的工具？

今天，我们将用纯 CSS 打造一个浪漫的"亲吻动画" ，让两个小球"一见钟情"，最终"深情一吻"。

这不仅是一次技术实践，更是一场前端艺术的表达 。

通过这个案例，你将深入掌握 CSS 动画、盒模型、伪元素、定位、关键帧 等核心技能。

---

一、需求分析：动画的"剧本"设计

我们要实现一个 4 秒循环的动画：

1. 女主球（左） ：轻微晃动，表达"羞涩"。
2. 男主球（右） ：主动靠近，旋转"献吻"。
3. 亲吻瞬间：出现"爱心"特效，嘴巴闭合。
4. 回归原位：循环播放。

💡 CSS 动画的本质是"时间轴上的状态变化" 。

---

二、HTML 结构：面向对象的 DOM 设计

<div class="container">
  <!-- 女主 -->
  <div class="ball" id="l-ball">
    <div class="face face-l">
      <div class="eye eye-l"></div>
      <div class="eye eye-r"></div>
      <div class="mouth"></div>
    </div>
  </div>
  <!-- 男主 -->
  <div class="ball" id="r-ball">
    <div class="face face-r">
      <div class="eye eye-l eye-l-p"></div>
      <div class="eye eye-r eye-r-p"></div>
      <div class="mouth mouth-r"></div>
      <div class="kiss-m">
        <div class="kiss"></div>
        <div class="kiss"></div>
      </div>
    </div>
  </div>
</div>

面向对象思想：

• .ball：球体基类，定义通用样式（圆形、边框、背景）。
• .face：面部基类，控制表情位置。
• .face-l / .face-r：多态实现，左右脸不同表情。
• .eye-l-p / .eye-r-p：特殊状态，右眼"睁大"表达惊喜。

💡 结构清晰，便于后期维护和扩展。

---

三、CSS 核心技术拆解

1. 水平垂直居中：transform 的妙用

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• top: 50%：上边缘距顶部 50%。
• transform: translate(-50%, -50%)：自身向左上移动 50%，实现精准居中。

💡 这是最常用且兼容性最好的居中方案之一。

---

2. 画一个"球"：盒模型与圆角

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 关键：正方形变圆形 */
  border: 8px solid;
  background-color: #fff;
}

• border-radius: 50%：将正方形变成完美的圆形。
• border：为球体添加轮廓，增强立体感。

---

3. 伪元素 ::before 和 ::after：无中生有

.face::before, .face::after {
  content: ""; /* 必须有 content */
  position: absolute;
  width: 18px;
  height: 8px;
  background-color: plum;
  top: 20px;
  border-radius: 50%;
}
.face::before { right: -8px; }
.face::after { left: -5px; }

💡 伪元素可以创建额外的 DOM 节点，而无需修改 HTML。

• 这里用来画"耳朵"或"装饰"，增加趣味性。
• content 是伪元素的"开关"，缺一不可。

---

4. 画"眼睛"与"嘴巴"：定位与边框技巧

.eye {
  width: 15px;
  height: 14px;
  border-radius: 50%;
  border-bottom: 5px solid; /* 用边框画半圆 */
  position: absolute;
}
.eye-l { left: 10px; }
.eye-r { right: 5px; }

.mouth {
  width: 30px;
  height: 14px;
  border-radius: 50px;
  border-bottom: 5px solid;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto; /* 水平居中 */
}

• 眼睛 ：利用 border-bottom 实现半圆形。
• 嘴巴 ：margin: auto 让其在父容器中水平居中。

---

四、CSS 动画：@keyframes 与 animation

1. 女主球动画：#l-ball

#l-ball {
  animation: close 4s ease infinite;
  z-index: 100; /* 确保在最上层 */
}

@keyframes close {
  0% { transform: translate(0); }
  20% { transform: translate(20px); }
  35% { transform: translate(20px); }
  55% { transform: translate(0); }
  100% { transform: translate(0); }
}

• 含义：从 0% 到 20%，向右移动 20px；保持到 35%；55% 回到原位。
• infinite：无限循环。

---

2. 女主脸动画：face-l

.face-l {
  animation: face 4s ease infinite;
}

@keyframes face {
  0% { transform: translate(0) rotate(0deg); }
  20% { transform: translate(5px) rotate(-2deg); }
  28% { transform: translate(0) rotate(0deg); }
  /* ... */
}

• 微表情：轻微左右晃动 + 小幅度旋转，表现"害羞"。
• 多关键帧控制，动画更细腻。

---

3. 男主球动画：#r-ball

#r-ball {
  animation: kiss 4s ease infinite;
}

@keyframes kiss {
  50% { transform: translate(-30px) rotate(20deg); } /* 靠近并旋转 */
  60% { transform: translate(33px); } /* 快速后退 */
  67% { transform: translate(-33px); } /* 再次靠近 */
  77% { transform: translate(0); } /* 回归 */
}

• 主动出击：先靠近（-30px），再快速"亲吻"（33px → -33px），最后回归。
• rotate(20deg)：增加动态感。

---

4. 亲吻特效：爱心与闭嘴

(1) 爱心出现 kiss-m

.kiss-m {
  opacity: 0;
  animation: kiss-m 4s ease infinite;
}

@keyframes kiss-m {
  60% { opacity: 1; } /* 60% 时出现 */
  66.1% { opacity: 0; } /* 66.1% 时消失 */
}

• 两个 .kiss 元素叠加，形成"双爱心"效果。
• border-left: 5px solid + border-radius: 50%：画出心形的一半。

(2) 嘴巴闭合 mouth-r

.mouth-r {
  animation: mouth-m 4s ease infinite;
}

@keyframes mouth-m {
  55% { transform: translate(0); } /* 闭嘴 */
  60% { transform: translate(0); }
  66.1% { transform: translate(1); } /* 张嘴 */
}

• translate(0) 表示闭合，translate(1) 表示微张。
• 与爱心动画同步，营造"亲吻"瞬间。

---

五、动画时间轴对齐：精确到毫秒

时间点	左球	右球	爱心	嘴巴
0%	静止	静止	隐藏	张开
50%	-	靠近	-	-
60%	-	亲吻	出现	闭合
66.1%	-	分离	消失	张开

💡 动画的精髓在于"同步" 。

通过精确控制 @keyframes 的百分比，让所有元素在同一时刻"上演大戏"。

---

六、优化与思考

1. z-index 层级控制

#l-ball { z-index: 100; }

确保女主球在最上层，避免被男主球遮挡。

2. ease 缓动函数

• ease：先快后慢，更符合自然运动。
• 可尝试 ease-in-out 或 cubic-bezier() 获得更细腻效果。

3. 响应式考虑

• 可添加 @media 查询，适配小屏幕。
• 使用 vw/vh 替代 px，实现相对布局。

---

结语：CSS 的无限可能

这个"亲吻动画"看似简单，却融合了 盒模型、定位、伪元素、变换、动画 等 CSS 核心技术。

它告诉我们：

CSS 不仅能构建页面，更能讲述故事，传递情感。