用 CSS 谈一场甜甜的恋爱：可爱的小圆球情侣亲密动画制作

lIIIllIlIllIIl
135 阅读4分钟

纯 CSS 实现小圆球情侣互动动画：角色绘制与动作时序全解析

CSS 动画不只是移动一个方块或改变颜色，它可以实现真正的情绪表达与互动效果。本文将用一对“圆球情侣亲密互动”动画案例，带你从 0 到 1 理解如何构建卡通角色、赋予表情、实现动作，并进行时序协调。

你将学到：

  • 如何使用 HTML 语义结构构建动画角色
  • 如何用 CSS 盒模型绘制表情五官
  • border + border-radius 伪类技巧
  • CSS 动画 @keyframes、transform、opacity 的配合
  • 多元素联动动画时的时序编排

效果如下图：

image.png

image.png

是不是很可爱、很亲密？
这对圆球小情侣不仅会害羞、会靠近、还会偷偷亲亲。
重点是 —— 全部用 纯 HTML + CSS 实现，没有一张图片。

如果你想用代码做情绪、做表情、让网页“活起来”，
这篇动画实战你一定不能错过哦。

1. 项目结构与布局思路

动画由两部分组成：HTML 负责结构，CSS 负责视觉与动画。

HTML 结构思路

  • .container：居中整个画面
  • .ball：代表角色的头部（圆形）
  • .face：脸部区域容器
  • .eye、.mouth：五官
  • .kiss：接吻特效的小白圆角块

结构如下：

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

设计重点：

  • 使用面向对象 CSS：.face 为基类，.face-l、.face-r 做样式差异
  • 五官均为 div 盒子组合，而非图片，实现纯 CSS 表情

2. CSS 基础样式与角色绘图

先重置默认样式：

* { margin: 0; padding: 0; }
body { background-color: #08dcdc; }

居中布局

使用绝对定位 + transform：

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

绘制角色头部（球体）

.ball {
    background-color: white;
    border: 8px solid;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

圆形 + 描边，简单但直观。

3. 绘制脸部与五官技巧

脸部区域

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

用绝对定位将脸放到球的右侧偏下位置。

面红晕效果：伪元素实现

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

关键技巧：

  • 用 ::before / ::after 而非再写 div
  • border-radius: 50% + 扁形生成腮红

眼睛：使用边框画弯曲线

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

原理解析：

  • 圆形 + 只画底边 border-bottom = 弯弧形眼睛
  • 不用 SVG，即可做出笑眼效果

男主闭眼表情：

.eye-r-p {
    border-top: 5px solid;
    border-bottom: 0;
}

嘴巴：同理圆 + 底边框

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

男主嘴巴动画隐藏：

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

亲吻

.kiss {
    width: 13px;
    height: 10px;
    background-color: white;
    border-left:5px solid;
    border-radius: 50%;
}

4. 动画部分：关键帧与时序控制

双方“靠近、接触、离开”靠 @keyframes + transform 完成。

女主球体移动

#l-ball { animation: close 4s ease infinite; }

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

女主表情联动

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

@keyframes face {
    0%,10%,50%,100% { transform: translate(0) rotate(0); }
    20%,35% { transform: translate(5px) rotate(-2deg); }
}

轻微旋转制造害羞感。

男主移动 + 旋转倾身动作

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

@keyframes kiss {
    40% { transform: translate(0); }
    50% { transform: translate(30px) rotate(20deg); }
    60%,67% { transform: translate(-33px); }
}

靠近—亲吻—后退—回位。

嘟嘟嘴切换

嘴巴隐藏，再显示：

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

嘟嘟嘴闪现：

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

这一段是时序重点：嘴巴隐藏与嘟嘟嘴出现交错实现“嘟嘴 → 亲吻”效果。

5. 核心技术总结

技术点要点：

技术点用法
HTML 语义结构角色 → 五官 → 装饰分层
CSS 面向对象.face 基类，.face-l/.face-r 扩展
盒模型+圆角border-radius: 50% 画圆、椭圆
边框作线条border-bottom 实现弧线眼睛、嘴
伪元素红晕等装饰，自由组合
动画transform、opacity 联合
时间控制精确关键帧配比，模拟情绪节奏

通过纯 CSS 就能表达人物情绪与互动动作，比动画软件更灵活。

6. 可扩展方向

你可以继续升级：

  • 加眨眼动画（scaleY 减小）
  • 加泪滴、跳动爱心
  • 用 filter: blur() 做柔光
  • 用 cubic-bezier() 控制呼吸节奏

这个例子展示了 CSS 动画并不只是 UI transition，它能做到轻松的表情与剧情表达。

使用 CSS 画画和做动画不只是技巧练习，它让你理解 Web 表现力的极限，并能在交互设计中快速实现创意。

avatar
文章
阅读
粉丝