前端小彩蛋：纯 CSS 实现情侣小球互动，甜到齁的代码我扒下来了

用纯 CSS 实现超甜互动动画：两个小球的 "亲吻" 瞬间

大家好，今天给大家分享一个用纯 CSS 实现的趣味互动动画 ------ 两个卡通小球从对视到亲吻的甜蜜过程。整个动画不需要一行 JavaScript，仅通过 CSS 关键帧和变换属性就能实现流畅自然的互动效果。话不多说，先看看最终效果（建议配合代码食用）：

效果预览

两个白色小球（我们暂且叫它们 "女主" 和 "男主"）会周期性地完成这样一套动作：

女主先羞涩地向男主靠近一点
男主主动前倾，做出亲吻动作
亲吻瞬间会出现可爱的亲吻符号
之后两者恢复原位，等待下一次互动

实现思路拆解

这个动画的核心是通过CSS @keyframes 定义多组动画，再通过时间线协调让不同元素的动作配合起来。我们可以分三个部分来理解实现过程：

1. 基础布局与角色设计

首先需要搭建基础结构，用两个div.ball作为两个小球的主体，再通过子元素实现面部特征（眼睛、嘴巴、腮红）。

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>
  </div>
</div>

CSS 中通过border-radius: 50%实现圆形小球，用定位属性调整面部元素的位置：

css

css 复制代码

.ball {
  background-color: white;
  border: 8px solid;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  position: relative; /* 让子元素可以绝对定位 */
}

.face {
  width: 70px;
  height: 30px;
  position: absolute; /* 相对于父元素定位 */
  right: 0;
  top: 30px;
}

2. 面部细节：用伪元素和简单形状构建表情

面部特征的实现很巧妙，尤其是腮红和眼睛：

腮红：用::before和::after伪元素实现，避免增加多余 HTML 标签

css

css 复制代码

.face::after, .face::before {
  content: ""; /* 伪元素必须有content */
  position: absolute;
  width: 18px;
  height: 8px;
  background-color: #badc58; /* 可爱的粉色腮红 */
  top: 20px;
  border-radius: 50%;
}

眼睛：通过边框实现简单的眼部形状，男主和女主的眼睛有细微区别（男主是上边框，女主是下边框）

css

css 复制代码

.eye {
  width: 15px;
  height: 14px;
  border-radius: 50%;
  border-bottom: 5px solid; /* 女主眼睛是下边框 */
  position: absolute;
}
.eye-r-p {
  border-top: 5px solid; /* 男主眼睛是上边框 */
  border-bottom: 0;
}

嘴巴：用圆角边框实现微笑形状，亲吻时会隐藏

css

css 复制代码

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

3. 动画核心：多组关键帧的时间线配合

这是整个效果的灵魂 ------ 让两个角色的动作 "有来有回"，形成互动感。我们定义了 4 组关键帧动画，通过控制不同时间段的动作来实现协调效果：

女主的动画（l-ball）

css

css 复制代码

@keyframes close {
  0% { transform: translate(0); }
  20% { transform: translate(20px); } /* 向男主靠近 */
  35% { transform: translate(20px); } /* 停留一会儿 */
  55% { transform: translate(0px); } /* 回到原位 */
  100% { transform: translate(0px); }
}

同时配合面部的轻微转动，增加羞涩感：

css

css 复制代码

@keyframes face {
  20% { transform: translate(5px) rotate(-2deg); } /* 微微转头 */
  35% { transform: translate(5px) rotate(-2deg); }
  /* 其他时间恢复原位 */
}

男主的动画（r-ball）

男主的动作更主动，包含移动和旋转：

css

css 复制代码

@keyframes kiss {
  40% { transform: translate(0); }
  50% { transform: translate(30px) rotate(20deg); } /* 前倾靠近 */
  60% { transform: translate(-33px); } /* 靠近亲吻 */
  67% { transform: translate(-33px); } /* 停留 */
  77% { transform: translate(0px); } /* 回到原位 */
}

亲吻瞬间的细节处理

为了让亲吻更真实，我们做了两个细节：

男主嘴巴隐藏（opacity: 0）
出现亲吻符号（kiss-m元素显示）

css

css 复制代码

/* 嘴巴隐藏动画 */
@keyframes mouth-m {
  55% { opacity: 0; } /* 亲吻时隐藏 */
  66% { opacity: 0; }
  /* 其他时间显示 */
}

/* 亲吻符号显示动画 */
@keyframes kiss-m {
  55% { opacity: 0; }
  66% { opacity: 1; } /* 亲吻瞬间显示 */
  66.1% { opacity: 0; } /* 快速消失 */
}

动画设计小贴士

时间线同步：所有动画都设置为 4 秒周期，通过调整关键帧的百分比位置实现动作配合
动作缓冲 ：使用ease timing-function 让动作更自然，避免生硬的启停
细节丰富：添加面部转动、符号闪现等小细节，让动画更生动
复用原则：用伪元素减少 HTML 标签，用 class 复用样式

总结

这个小动画虽然简单，但包含了 CSS 动画的核心知识点：关键帧定义、transform 变换、动画时间控制和多元素协同。通过调整颜色、尺寸和关键帧参数，你可以轻松修改出属于自己的互动动画 ------ 比如改成两个星星眨眼、小猫打招呼等。

完整代码已经放在上面了，感兴趣的同学可以复制下来试试，也可以在此基础上扩展更多互动效果。如果觉得有用，欢迎点赞收藏～有任何问题或创意，欢迎在评论区交流！