用纯 CSS 实现甜蜜亲吻动画：关键帧与伪元素的实战练习

【CSS 动画实战】用纯 CSS 实现甜蜜亲吻动画

一、效果简介

本文实现了一个可爱的"亲亲动画"：

左边是女生（dz），右边是男生（lb），通过 CSS 动画 实现两人靠近、亲吻、再分开的全过程。

动画中使用了关键帧（@keyframes）、伪元素（::before、::after）、以及动画延时、透明度控制等技巧。

最终效果：

两个小球代表角色。
女生靠近再后退。
男生靠近时嘴巴变成"嘟嘴"，出现"亲吻"效果。

二、HTML 结构

xml 复制代码

<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-r-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>

结构分析：

.container：包裹整体动画，居中显示。
.ball：代表角色的圆形身体。
.face：面部基类，包含眼睛与嘴巴。
.face-l / .face-r：面部样式的多态（女生、男生）。
.kiss-m：控制"亲吻气泡"的动画元素。

三、核心 CSS 样式

1. 居中与基础样式

css 复制代码

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 238px;
}
.ball {
  border: 8px solid;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-color: #fff;
}
body {
  background-color: #ffc0cb; /* 粉色背景 */
}

通过 position + transform 实现水平垂直居中。

2. 面部结构（面向对象思维）

css 复制代码

.face {
  width: 70px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 30px;
}

伪元素实现"腮红"效果：

css 复制代码

.face::before, .face::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 8px;
  background-color: #c90808;
  top: 20px;
  border-radius: 50%;
}
.face::before { right: -8px; }
.face::after { left: -5px; }

使用伪元素而不是额外的 DOM，可减少结构重复，实现 DRY（Don't Repeat Yourself） 。

3. 眼睛与嘴巴

css 复制代码

.eye {
  width: 15px;
  height: 14px;
  border-radius: 50%;
  border-bottom: 5px solid;
  position: absolute;
}
.eye-l { left: 10px; }
.eye-r { right: 5px; }
.eye-r-p {
  border-top: 5px solid;
  border-bottom: 0;
}

嘴巴动画：

css 复制代码

.mouth {
  width: 30px;
  height: 14px;
  border-radius: 50%;
  border-bottom: 5px solid;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  transform: translate(3px);
  margin: auto;
}

四、动画逻辑

1. 女生移动动画

css 复制代码

#l-ball {
  animation: close 4s ease-in infinite;
}
@keyframes close {
  0%, 55%, 100% { transform: translate(0); }
  20%, 35% { transform: translate(20px); }
}

女生向右移动靠近，再返回原位。

2. 男生"亲吻"动画

css 复制代码

#r-ball {
  animation: kiss 4s ease infinite;
}
@keyframes kiss {
  40% { transform: translate(0); }
  50% { transform: translate(30px) rotate(20deg); }
  60%, 67% { transform: translate(-33px); }
  77%, 100% { transform: translate(0); }
}

男生向左倾斜靠近并"亲吻"，随后回到原点。

3. 嘴部与气泡动画

嘴巴消失、气泡出现：

css 复制代码

@keyframes mouth-m {
  0%, 54.9% { opacity: 1; }
  55%, 66% { opacity: 0; }
  66.1%, 100% { opacity: 1; }
}

气泡出现瞬间闪现：

css 复制代码

@keyframes kiss-m {
  0%, 55% { opacity: 0; }
  66% { opacity: 1; }
  66.1%, 100% { opacity: 0; }
}

五、关键设计思路总结

结构清晰：HTML 按"角色---面部---部件"层级组织。
样式复用 ：通过 .face 基类与 .face-l/.face-r 派生类实现多态。
伪元素应用 ：用 ::before、::after 减少 DOM。
关键帧同步：不同元素的动画节奏用相同的周期（4s）同步。
视觉平衡 ：通过 translate、rotate、opacity 控制自然感。

六、可扩展方向

增加"眨眼"动画（控制 .eye 的 border 宽度变化）。
添加背景渐变、心形粒子特效。
通过 JavaScript 控制动画触发（点击触发亲吻）。

总结：

这个动画是一个很好的 CSS 动画综合练习案例，涵盖了动画基础、伪元素技巧、动画同步与复用思想。通过合理的结构设计与关键帧控制，就能实现一个完整的互动小场景。