用 HTML 的 <div> 元素来创造发呆表情

前端

2023-10-02 13:10:35

前言

表情符号已成为我们日常在线交流中不可或缺的一部分。它们可以传达情绪、语气和意图，而无需使用文字。微信的表情库因其丰富性和表现力而闻名。

受微信表情的启发，我决定尝试使用 HTML 和 CSS 创建一个发呆的表情。本教程将引导你完成实现发呆表情的步骤，让你可以在聊天中增添一丝趣味。

效果预览

我们最终将实现的效果如下图所示：

[发呆表情效果图]

代码片段

<div class="face-container">
  <div class="face"></div>
  <div class="mouth"></div>
  <div class="eyes"></div>
</div>

.face-container {
  width: 100px;
  height: 100px;
  background-color: #ffff00;
  border-radius: 50%;
}

.face {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
  margin: 20px auto;
}

.mouth {
  width: 30px;
  height: 10px;
  background-color: #000000;
  border-radius: 5px;
  margin: 10px auto;
}

.eyes {
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 50%;
  margin: 10px 15px;
}

基本思路

要创建发呆表情，我们将使用 HTML 的 <div> 元素和 CSS 样式。

首先，创建一个包含表情所有元素的父容器 <div>。
然后，在父容器内创建三个子 <div> 元素，分别代表脸部、嘴巴和眼睛。
最后，使用 CSS 样式来设置每个子 <div> 的大小、形状、颜色和位置。

代码详解

父容器

<div class="face-container"></div>

父容器是一个 <div> 元素，它将包含表情的所有元素。它使用 CSS 类名 "face-container"，我们将用它来设置容器的样式。

脸部

<div class="face"></div>

脸部也是一个 <div> 元素，它使用类名 "face"。它被设置为圆形，并具有浅黄色背景。

嘴巴

<div class="mouth"></div>

嘴巴也是一个 <div> 元素，它使用类名 "mouth"。它被设置为一条水平线，并具有黑色背景。

眼睛

<div class="eyes"></div>

眼睛由两个 <div> 元素组成，它们使用类名 "eyes"。它们被设置为两个小圆圈，并具有黑色背景。

CSS 样式

CSS 样式用于设置每个子 <div> 的外观和位置：

/* 父容器 */
.face-container {
  width: 100px;
  height: 100px;
  background-color: #ffff00;
  border-radius: 50%;
}

/* 脸部 */
.face {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
  margin: 20px auto;
}

/* 嘴巴 */
.mouth {
  width: 30px;
  height: 10px;
  background-color: #000000;
  border-radius: 5px;
  margin: 10px auto;
}

/* 眼睛 */
.eyes {
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 50%;
  margin: 10px 15px;
}