CSS动画和HTML结构构造，如何俩个球相识相知相爱

胡gh
0 阅读6分钟

引言

在现代网页设计中，CSS 动画和HTML 元素结构的结合不仅能提升用户体验，还能为页面增添趣味性。本文将带你一步步了解如何使用 <div> 元素，通过 HTML 快捷结构输入方式 和 CSS 属性（如 display、position、border-radius） 来绘制出眉毛、嘴巴等面部表情，并实现基础动画效果。

首先思考，如何用一个HTML结构，就能生成这么多对象呢，这就用到我们最实用的盒子思想了，一层层的盒子(div)嵌套。

  1. 我们的主角是俩个球，所以先建一个"球"的盒子
  2. 接下来就是球里面的元素，球后面就是脸，所以"球"盒子里面又有一个"脸"盒子
  3. 脸里面，就有眉毛嘴巴，眼睛等元素，所以再在"脸"盒子下面创建"眼睛""嘴巴"，"眉毛"等盒子
  4. 创建完这些元素后，在style里面确定他们的位置，颜色，不能说背景颜色和脸的颜色一模一样，眼睛一高一低，嘴巴长在眉毛上，这样的俩张脸，你咋让他相识相知相爱啊。
  5. 最后一步，就是实现动画了

一、HTML 结构：快速构建基础骨架

我们可以使用一些快捷键来快速生成 HTML 结构，这在前端开发中非常高效。

使用缩写快速输入：

 div#l-ball.ball (#后面的是id，.后面的是class)
 .container>#l-ball.ball+#r-ball.ball
  • > 表示子元素选择器
  • + 表示兄弟元素选择器
  • # 表示 ID
  • . 表示 class

示例代码：

<body>
    <div class="container">
        <div id="l-ball" class="ball">
            <div class="face face-l">
                <div class="eye eye-l"></div>//左眼
                <div class="eye eye-r"></div>//右眼
                <div class="mouth mouth-l"></div>
            </div>
        </div>
        <div id="r-ball" class="ball">
            <div class="face face-r">
                <div class="eye eye-l eye-l-p"></div>//为了区分和上一个"球"命名为eye-l-p，但同时享有eye和eye-l的特性
                <div class="eye eye-r eye-r-p"></div>//同上
                <div class="mouth mouth-r"></div>
            </div>
        </div>
    </div>
    
</body>

二、CSS 基础样式：使用 border-radius 构建眉毛与嘴巴

1. 设置容器 .face

 .face{
                width: 70px;
                height: 30px;
                position: absolute;
                right: 0;
                top: 30px;
                border-top-right-radius: 15px;
                /* background-color: black; */
        }

2. 眼睛 .eye

我们用两个 <div> 分别表示左右眼，使用 border-radius 让它们变成弯弯的形状：

 .eye{
            width: 15px;
            height: 14px;
            border-radius: 50%;
            border-bottom:5px solid white;
            position: absolute;
            /* display: inline-block; */
        }
        .eye-l{
            left: 5px;
        }
        .eye-r{
            right: 5px;
        }

3. 嘴巴 .mouth

嘴巴可以是一个椭圆形，通过 border-radius 控制其形状：

        .mouth{
            width: 30px;
            height: 14px;
            border-radius: 50%; 
            border-bottom: 5px solid white;
            position: absolute;
            bottom: -5px;
            transform: translate(3px);
            left: 0;
            right: 0;
            margin: auto;
            /* background-color: white; */
        }

三、CSS 显示与定位属性详解

1. display 属性

控制元素的显示类型，影响布局方式：

值描述
block块级元素，独占一行，可设置宽高
inline行内元素，不独占一行，不能设置宽高
inline-block行内块级元素，可在一行内排列，同时支持宽高

示例：若想让多个 .eye 并排显示，可用：

.eye {
  display: inline-block;
}

但在此案例中，我们使用了 position: absolute 来更精确地控制位置。

2. position 定位属性

值描述
static默认值，不定位
relative相对于自身原来的位置进行偏移
absolute相对于最近的定位祖先元素进行定位
fixed固定于视口
sticky粘性定位，滚动到特定位置后固定

我们在 .face 上设置了 position: relative，这样内部的 .eye 和 .mouth 就可以使用 absolute 定位，相对于 .face 进行布局。

四、CSS 动画实现：让表情“活”起来

接下来我们为眼睛添加一个简单的动画，模拟“挑眉”的动作。

1. 定义关键帧动画 raise-eyebrow

@keyframes raise-eyebrow {
  0% { transform: translateY(0) rotate(-15deg); }
  50% { transform: translateY(-8px) rotate(-10deg); }
  100% { transform: translateY(0) rotate(-15deg); }
}

2. 应用于左侧眼睛

l-eye {
  animation: raise-eyebrow 2s ease-in-out infinite;
}

左球已经开始对右球发起攻势了。

3.还可以定义其他的部位

可以根据"实际情况"设置不同的动态状态

@keyframes smileShake {
 0%, 100% { transform: translateX(0); }
 25% { transform: translateX(5px); }
 75% { transform: translateX(-5px); }
}

应用于嘴部

.mouth-r{
animation: smileShake 1s ease-in 1;
}

五、综合示例：完整代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color:green;
            margin:0;
        }
        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            /* width: 238px; */
            /* height: 238px; */
            /* background-color: black; */
            transform: translate(-50%, -50%);
        }
        .ball{
            width: 100px;
            height: 100px;
            border: 8px solid white;
            border-radius: 50%;
            display: inline-block;
            background-color: blue;
            vertical-align: top;
            position:relative;
        }
        .face{
                width: 70px;
                height: 30px;
                position: absolute;
                right: 0;
                top: 30px;
                border-top-right-radius: 15px;
                /* background-color: black; */
        }
        @keyframes raise-eyebrow {
  0% { transform: translateY(0) rotate(-15deg); }
  50% { transform: translateY(-8px) rotate(-10deg); }
  100% { transform: translateY(0) rotate(-15deg); }
}
        .eye{
            width: 15px;
            height: 14px;
            border-radius: 50%;
            border-bottom:5px solid white;
            position: absolute;
            /* display: inline-block; */
        }
        .eye-l{
            left: 5px;
            animation: raise-eyebrow 2s infinite;
        }
        .eye-r{
            right: 5px;
        }
        .mouth{
            width: 30px;
            height: 14px;
            border-radius: 50%; 
            border-bottom: 5px solid white;
            position: absolute;
            bottom: -5px;
            transform: translate(3px);
            left: 0;
            right: 0;
            margin: auto;
            /* background-color: white; */
        }
        .eye-l-p{
            border-top:5px solid white;
            border-bottom: 0px;
        }
        .eye-r-p{
            border-top:5px solid white;
            border-bottom: 0px; 
        }
        .mouth-r{
 animation: smileShake 1s ease-in 1;
 }
    </style>
</head>
<body>
    <div class="container">
        <div id="l-ball" class="ball">
            <div class="face face-l">
                <div class="eye eye-l"></div>
                <div class="eye eye-r"></div>
                <div class="mouth mouth-l"></div>
            </div>
        </div>
        <div id="r-ball" class="ball">
            <div class="face face-r">
                <div class="eye eye-l eye-l-p"></div>
                <div class="eye eye-r eye-r-p"></div>
                <div class="mouth mouth-r"></div>
            </div>
        </div>
    </div>
    
</body>
</html>

tips：

css动画的实现 在 CSS 中，动画是通过 @keyframes 规则定义的，它描述了动画从开始到结束的状态变化过程。然后，你可以使用 animation 属性将这些动画应用到特定的 HTML 元素上。

关键属性：

  • @keyframes：定义动画的各个阶段。
  • animation-name：指定要使用的动画名称（即 @keyframes 的名字）。
  • animation-duration：动画完成一个周期所需的时间。
  • animation-timing-function：动画的速度曲线。
  • animation-delay：动画开始前的延迟时间。
  • animation-iteration-count：动画播放次数，默认值为 1，设置为 infinite 可无限循环。
  • animation-direction：是否在下一周期反转动画方向

具体用法：例如在嘴巴动画中，先创建一个@keyframes规则：

@keyframes smileShake {
 0%, 100% { transform: translateX(0); }
 25% { transform: translateX(5px); }
 75% { transform: translateX(-5px); }
}

我们使用 translateX() 来左右移动嘴巴的位置，制造出一种轻微抖动的感觉。通过调整百分比点上的 translateX 值，可以控制嘴巴的具体运动轨迹。 然后调用这个规则：

.mouth-r{
animation: smileShake 1s ease-in 1;
}

六、结语：从基础到创意表达

通过本篇文章，我们学习了以下核心内容：

  • 如何使用 Emmet 快速构建 HTML 结构；
  • 如何使用 border-radius 创建曲线图形（如眼睛、嘴巴）；
  • 掌握 display 与 position 的作用及区别；
  • 利用 CSS 动画实现简单动态效果；
  • 综合运用上述知识打造一个会“动”的表情包。

未来你可以进一步拓展这个项目，例如：

  • 添加眉毛、鼻子等更多细节；
  • 使用 JavaScript 控制动画状态；
  • 实现点击切换表情功能；
  • 甚至创建一个完整的表情包库！

CSS 不只是布局工具，它也是一门艺术语言。掌握这些技巧，你就能创造出既美观又富有表现力的网页元素。

avatar
文章
阅读
粉丝