CSS 也能撒狗粮？300 行代码实现会 "贴贴" 的情侣小球动画

CSS 也能撒狗粮？300 行代码实现会 "贴贴" 的情侣小球动画

谁说程序员的浪漫藏在 0 和 1 里？今天我要曝光一个秘密：CSS 才是隐形的恋爱大师！用 300 行代码就能让两个小球上演 "靠近 - 害羞 - 亲吻" 的甜腻戏码，连动画节奏都像在说 "今晚月色真美"。话不多说，先上动图感受下这波狗粮（建议单身狗备好大蒜）：

一、先给小球搭个 "恋爱舞台"

要让小球谈恋爱，得先给它们一个浪漫的约会场地。我用了最经典的 "水平垂直居中" 大法，让整个舞台稳居中屏幕 C 位 —— 毕竟恋爱中的主角，就该站在最显眼的地方。

html

预览

<div class="container">
  <!-- 女主小球 -->
  <div class="ball" id="l-ball">...</div>
  <!-- 男主小球 -->
  <div class="ball" id="r-ball">...</div>
</div>

CSS 里用position: absolute+transform: translate(-50%, -50%)实现居中，比 margin-left/top 的老办法更灵活，不管屏幕多大都能稳稳卡在中间：

css

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中核心代码 */
  width: 238px;
}

小球本身的造型也很简单：圆形（border-radius: 50%）+ 白胖身子 + 深色边框，像极了两颗刚从糖罐里滚出来的奶糖：

css

.ball {
  background-color: white;
  border: 8px solid; /* 边框颜色继承父元素，省得重复写 */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  position: relative; /* 为了让脸上的五官定位 */
}

二、给小球画脸：CSS 伪元素是最好的化妆刷

给小球画脸时，我悟了：CSS 伪元素就是程序员的 "无痕化妆术"。不用在 HTML 里堆一堆div，用::before和::after就能偷偷给小球加腮红 —— 这操作，比美妆博主的遮瑕膏还隐形。

先定义一个face基类（面向对象 CSS 思想 get！），所有五官都基于这个 "脸盘子" 定位：

css

.face {
  width: 70px;
  height: 30px;
  position: absolute; /* 相对于小球定位 */
}

然后用多态思想区分男女主的脸：女主（face-l）脸靠右，男主（face-r）脸靠左，细节里藏着性别差（别问，问就是细节控）：

css

.face-l { right: 0; top: 30px; } /* 女主脸偏上 */
.face-r { left: 0; top: 37px; } /* 男主脸稍下，显得更主动 */

腮红直接用伪元素画两个小椭圆，不用额外写 HTML 标签，清爽！

css

.face::after, .face::before {
  content: ""; /* 伪元素必须有content，哪怕是空的 */
  position: absolute;
  width: 18px;
  height: 8px;
  background-color: #badc58; /* 粉嘟嘟的颜色 */
  top: 20px;
  border-radius: 50%; /* 椭圆腮红 */
}
.face::before { right: -8px; } /* 右腮红 */
.face::after { left: -5px; } /* 左腮红 */

眼睛和嘴巴用 border 画更灵动：女主眼睛是下边框（显得温柔），男主眼睛是上边框（有点拽拽的）；嘴巴平时是小月牙，亲吻时会 "消失"—— 这细节，连琼瑶剧都自愧不如。

三、让爱情动起来：动画时间线是恋爱的心跳

重点来了！让小球从 "陌生" 到 "贴贴" 的关键，是动画时间线的精准控制。就像约会时的距离感：先试探靠近，再大胆出击，最后害羞退回，每一步都得卡准节奏。

女主的 "害羞步" 动画

女主小球（l-ball）的动画像小女生的试探：先向右挪 20px（有点心动），停顿一下（纠结），再退回原位（假装淡定）：

css

#l-ball {
  animation: close 4s ease infinite;
}
@keyframes close {
  0% { transform: translate(0); } /* 初始位置 */
  20% { transform: translate(20px); } /* 20%时间点挪过去 */
  35% { transform: translate(20px); } /* 停15%时间 */
  55% { transform: translate(0); } /* 退回 */
  100% { transform: translate(0); } /* 保持原位 */
}

连她的脸（face-l）都在配合害羞：微微右移 + 小幅度歪头，像在说 "你怎么才来"：

css

@keyframes face {
  20% { transform: translate(5px) rotate(-2deg); } /* 歪头杀 */
  35% { transform: translate(5px) rotate(-2deg); } /* 保持害羞 */
}

男主的 "主动出击" 动画

男主小球（r-ball）明显更主动：前期不动（假装高冷），中期突然右移 + 转头（准备亲），接着猛向左靠（贴贴！），最后退回（回味）：

css

#r-ball {
  animation: kiss 4s ease infinite;
}
@keyframes kiss {
  40% { transform: translate(0); } /* 前期不动 */
  50% { transform: translate(30px) rotate(20deg); } /* 转头靠近 */
  60% { transform: translate(-33px); } /* 猛冲贴贴 */
  67% { transform: translate(-33px); } /* 保持亲吻 */
  77% { transform: translate(0); } /* 退回 */
}

亲吻瞬间的 "心机细节"

为了让亲吻更真实，我加了两个小心机：

1. 男主嘴巴消失：亲吻时嘴巴（mouth-r）突然隐身，用opacity动画实现：

css

@keyframes mouth-m {
  55% { opacity: 1; } /* 55%前可见 */
  66% { opacity: 0; } /* 亲吻时消失 */
  66.1% { opacity: 1; } /* 结束后立刻出现 */
}

2. 冒出亲吻特效：两个小三角（kiss）在亲吻瞬间闪现，像漫画里的 "啾咪" 符号：

css

.kiss-m {
  opacity: 0; /* 默认隐藏 */
  animation: kiss-m 4s ease infinite;
}
@keyframes kiss-m {
  55% { opacity: 0; }
  66% { opacity: 1; } /* 亲吻时显示 */
  66.1% { opacity: 0; } /* 立刻消失 */
}

其实做这个动画时，我反复调整了十几次时间线 —— 就像谈恋爱时拿捏距离感，快一秒太急躁，慢一秒太疏离。最后发现：好的 CSS 动画和爱情一样，都需要 "恰到好处"。

如果你也想给页面加点甜，直接拿走代码改改颜色 / 大小，就能让按钮、图标都上演 "恋爱戏码"。比如把小球换成爱心，把亲吻换成拥抱，创意全看你的脑洞～

最后灵魂拷问：用 CSS 撒狗粮，这操作够不够秀？评论区交出你的 "代码浪漫"，让我康康谁才是隐藏的恋爱大师！

（代码已上传 GitHub，戳我头像找仓库，顺手点个 star 的都是真爱～）