用HTML与CSS创造浪漫：一个“亲吻”动画的实战解析

神秘的猪头
227 阅读6分钟

在Web开发中，HTML和CSS不仅仅是构建网页结构和样式的工具，它们还能创造出令人惊叹的视觉效果和互动体验。本文将通过一个名为“CSS Animation”的实战项目，深入解析如何仅使用HTML和CSS实现一个充满趣味的“亲吻”动画。这个项目不仅展示了基础语法的应用，更体现了开发者对细节的精妙把控和对动画节奏的深刻理解。

项目概览

该项目的核心目标是创建两个可爱的“小球”角色——“女主”（左球）和“男主”（右球），并通过CSS动画让它们模拟出“靠近”、“害羞”和“亲吻”等一系列拟人化动作。整个过程无需JavaScript，完全依赖CSS的@keyframes和animation属性驱动，是纯前端动画技术的绝佳范例。

最终效果如下：

  1. 女主（左）会先向前移动一小段距离，然后微微左右晃动头部，表现出犹豫和害羞。
  2. 男主（右）随后快速冲向女主，紧接着迅速后退，模拟“亲吻”后害羞逃跑的动作。
  3. 在男主冲向女主的瞬间，一个“吻”的标记（两个小红点）会短暂出现，并且男主的“嘴”会消失，增强动画的真实感。

1. HTML结构：搭建动画舞台与角色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <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>
</body>
</html>

讲解：

  • <div class="container"> ：这是整个动画的舞台。它使用 position: absolute 和 transform: translate(-50%, -50%) 实现了在页面中完美居中。
  • <div class="ball" id="l-ball"> 和 <div class="ball" id="r-ball"> ：这是两个角色的身体。它们共享 .ball 的基础圆形样式，通过 id 进行区分，以便应用不同的动画。
  • .face 容器：每个角色都有一个“脸”，内部包含眼睛、嘴巴。face-l 和 face-r 类用于区分并应用不同的动画。
  • .kiss-m 和 .kiss：这是一个巧妙的设计。kiss-m 是“吻”的容器，内部两个 .kiss 元素将作为“亲吻”时出现的标记。它被放在“男主”内部，随男主移动。

2. CSS基础样式：绘制角色形象

*{
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(130, 90, 26);
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 238px;
}
.ball{
  background-color: red;
  border: 8px solid;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

讲解：

  • *{ margin: 0; padding: 0; } 清除了所有元素的默认边距，保证布局干净。
  • body 的深棕色背景为动画营造了温馨的氛围。
  • .container 的定位和居中是确保动画在屏幕中央显示的关键。
  • .ball 是角色的“身体”。border-radius: 50% 将其变为圆形，border 属性添加了黑色轮廓，使其更具卡通感。position: relative 为内部元素的绝对定位提供了参考。

3. 面部细节：用CSS“画”出表情

.face{
    width:70px;
    height:20px;
    position:absolute;
    right: 0;
    top: 30px;
}
/* 伪元素选择器 */
.face::after,.face::before{
  content:"";
  position: absolute;
  width: 18px;
  height: 8px;
  background-color: #000;
  border-radius:50%;
  top: 20px;
}
.face::before{
  right: -8px;
}
.face::after{
left: -5px;
}
.eye {
    width: 15px;
    height: 14px;
    border-radius: 50%;
    border-bottom:5px solid;
    position: absolute;
}
.eye.eye-l{
    left: 10px;
}
.eye.eye-r{
    right: 10px;
}
.eye.eye-r-p{
 border-top: 5px solid;
 border-bottom: 0px solid;
}
.mouth {
    width:30px;
    height: 14px;
    border-radius: 50%;
    border-bottom: 5px solid rgb(23, 24, 23);
    position: absolute;
    bottom: -20px;
    left:0;
    right: 0;
    transform: translate(3px);
    margin:auto;
}

讲解：

  • .face 定位在 .ball 的右上区域，作为面部的基座。
  • 伪元素 ::before 和 ::after：这是CSS的高级技巧。它们创建了两个小黑点作为“脸颊”，无需在HTML中添加额外标签，代码更简洁。
  • .eye：通过 border-bottom: 5px solid 创建了朝下的半圆，模拟“睁眼”。eye-r-p 类将 border-top 设为实线，使男主的眼睛朝上，表现出不同的神态。
  • .mouth：一个带弧度的黑线，作为嘴巴。margin: auto 和 left:0; right: 0; 实现了水平居中。

4. 动画核心：编排“剧情”

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

讲解：

  • 女主移动 (#l-ball 动画) ：close 动画时长4秒，无限循环。从 0% 到 20%，她向右移动20px（靠近男主）。在 20% 到 35% 保持位置，然后在 55% 返回原位。z-index: 100 确保她始终在男主前面。
.face-l{
    animation: face 4s ease infinite;
}
@keyframes face {
    0%{
        transform: rotate(0deg) translate(0px);
    }
    10%{
        transform: rotate(0deg) translate(0px);
    }
    20%{
        transform: rotate(-2deg) translate(5px);
    }
    28%{
        transform: rotate(0deg) translate(0px);
    }
    35%{
        transform: rotate(-2deg) translate(5px);
    }
    50%{
        transform: rotate(0deg) translate(0px);
    }
    100%{
        transform: rotate(0deg) translate(0px);
    }
}

讲解：

  • 女主害羞 (face-l 动画) ：在她移动的同时（20% 和 35% 时间点），她的“脸”会 rotate(-2deg) 并 translate(5px)，模拟害羞地左右晃动头部。这个动画与移动动画同步，动作更自然。
#r-ball{
    animation: kiss 4s ease infinite;
    z-index:10;
}
@keyframes kiss {
    40%{
        transform: translate(0px);
    }
    50%{
        transform: translate(30px) rotate(20deg);
    }
    60%{
        transform: translate(-33px);
    }
    67%{
        transform: translate(-33px);
    }
    77%{
        transform: translate(0px);
    }
    100%{
        transform: translate(0px);
    }
}

讲解：

  • 男主行动 (#r-ball 动画) ：这是动画的高潮。在 50%（2秒），他突然 translate(30px) rotate(20deg)，迅猛冲向女主。紧接着在 60%，他 translate(-33px)，向后弹开，模拟“亲完就跑”的害羞。这个急促的节奏是动画的趣味所在。

5. 终极特效：“亲吻”瞬间的实现

.mouth-r {
    animation: mouth-m 4s ease infinite;
}
.kiss-m{
    position: absolute;
    left:20px;
    top: 33px;
    opacity: 0;
    animation: kiss-m 4s ease infinite;
}
.kiss {
    width: 13px;
    height: 6px;
    background-color: black;
    border-left: 5px solid;
    border-radius: 50%;
}

讲解：

  • .kiss 元素是“吻”的标记，样式为一个小红点（background-color: black 可能应为红色以更像吻痕）。
@keyframes kiss-m {
    0%{
        opacity: 0;
    }
    55%{
        opacity: 0;
    }
    66%{
        opacity: 1;
    }
    66.1%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes mouth-m {
      0%{
        opacity: 1;
    }
    54.9%{
        opacity: 0;
    }
    55%{
        opacity: 0;
    }
    66%{
        opacity: 0;
    }
    66.1%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

讲解：

  • “吻”的闪现 (kiss-m 动画) ：opacity 在 66% 时变为 1，但在 66.1% 瞬间变回 0。这个极短的显示时间，完美捕捉了“亲吻”发生的瞬间。
  • 嘴的消失 (mouth-m 动画) ：男主的嘴在 54.9% 到 66.1% 之间 opacity: 0。这表示在“亲吻”时，他的嘴“不可见”了，细节满分！
.face-r{
    left:0;
    top:37px;
}

讲解：

  • .face-r：将男主的“脸”定位在身体的左下区域，与女主形成对称。

总结

通过将代码与讲解结合，我们可以清晰地看到，这个动画是如何通过精确的时间轴控制、巧妙的CSS技巧（如伪元素）和细腻的动画编排，将简单的HTML元素组合成一个充满情感和故事性的动态场景。每一个 keyframes 百分比都至关重要，共同编织了这场浪漫的“亲吻”瞬间。

avatar
文章
阅读
粉丝