用纯 CSS 实现双球互动动画：位移、表情与特效的协同控制

用纯 CSS 实现双球互动动画：位移、表情与特效的协同控制

在前端开发中，CSS 动画不仅能提升界面表现力，还能在不依赖 JavaScript 的前提下实现复杂的视觉交互效果。本文将通过一个完整的示例，展示如何使用 纯 HTML + CSS 构建一个多阶段角色互动动画——两个圆形角色从初始状态靠近、完成一次“互动”，再恢复原位。整个过程包含位移动画、面部表情变化、透明度控制及伪元素装饰等关键技术点。

💡 项目特点：

• 零 JavaScript
• 单一 HTML 文件即可运行
• 动画时长 4 秒，无限循环
• 涵盖 transform、opacity、keyframes、z-index 等核心 CSS 动画技巧

---

一、HTML 结构设计

动画由两个圆形角色组成，每个角色包含面部细节（眼睛、嘴巴）及装饰元素（红晕、爱心特效）：

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

结构说明：

• .ball：角色主体，圆形；
• .face：面部容器，用于定位表情组件；
• .eye / .mouth：基础表情元素；
• .kiss-m：仅右侧角色包含，用于在特定帧显示互动特效。

---

二、CSS 样式与动画实现

1. 全局与容器样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #78e3e9;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  width: 238px;
  position: relative;
}

使用 Flex 布局替代 transform: translate(-50%, -50%)，语义更清晰且兼容性更好。

2. 角色主体样式

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: white;
  border: 8px solid #333;
  display: inline-block;
  position: relative;
  transition: transform 0.3s ease; /* 辅助平滑过渡 */
}

3. 面部细节：红晕、眼睛与嘴巴

红晕（使用伪元素）

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

眼睛（通过边框模拟“眯眼”与“上扬”）

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

/* 右侧角色使用上边框模拟开心眼神 */
.eye-r-p {
  border-bottom: none;
  border-top: 5px solid #333;
}

嘴巴（居中定位 + 微调）

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

4. 核心动画：时间轴协同控制

整个动画周期为 4 秒，各元素通过精确的 @keyframes 百分比实现同步。

左侧角色：靠近与回退

#l-ball {
  animation: moveLeft 4s ease infinite;
  z-index: 100; /* 确保在上层 */
}
@keyframes moveLeft {
  0%, 100%   { transform: translateX(0); }
  20%, 35%   { transform: translateX(20px); }
  55%        { transform: translateX(0); }
}

左侧面部：轻微晃动增强生动感

.face-l {
  animation: shakeFace 4s ease infinite;
}
@keyframes shakeFace {
  0%, 28%, 50%, 100% { transform: translateX(0) rotate(0); }
  20%, 35%           { transform: translateX(5px) rotate(-2deg); }
}

右侧角色：飞扑 + 反弹

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

嘴巴显隐：模拟“闭嘴”动作

.mouth-r {
  animation: toggleMouth 4s ease infinite;
}
@keyframes toggleMouth {
  0%, 54.9%, 66.1%, 100% { opacity: 1; }
  55%, 66%               { opacity: 0; }
}

注意：使用 54.9% 与 55% 的微小间隔，可避免浏览器因浮点误差导致的闪烁问题。

互动特效：爱心显示

.kiss-m {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: showKiss 4s ease infinite;
}
.kiss {
  width: 15px;
  height: 15px;
  border-left: 5px solid #ff6b6b;
  border-radius: 50%;
  display: inline-block;
  transform: rotate(-45deg);
  margin: 0 2px;
}
@keyframes showKiss {
  0%, 55%, 66.1%, 100% { opacity: 0; }
  66%                  { opacity: 1; }
}

---

三、关键技术总结

技术点	应用场景	说明
transform: translate + rotate	角色位移与姿态变化	实现自然运动轨迹
opacity 控制	表情切换与特效显隐	避免元素频繁创建/销毁
精确 keyframes 百分比	多动画同步	利用 0.1% 间隔规避渲染抖动
伪元素 (::before/::after)	装饰性细节（红晕）	减少 DOM 节点数量
z-index 层级管理	视觉遮挡关系	确保左侧角色始终在前
border 模拟图形	眼睛、嘴巴、爱心	无需图片或 SVG，轻量高效

---

四、结语

本案例通过纯 CSS 实现了一个多阶段、多元素协同的动画效果。其核心在于精准的时间轴控制、transform 与 opacity 的组合运用，以及合理的层级管理。这些技术思路可直接迁移到实际项目中的加载动画、用户引导或微交互设计中，兼具实用性与性能优势。