腾讯QQ企鹅绘画：用CSS3打造可爱的卡通形象

2023-09-27 22:16:47

CSS3 绘制一只可爱的腾讯 QQ 企鹅

步骤 1：创建基本框架

让我们从搭建企鹅的基本结构开始。我们创建一个 CSS 类 .qq-penguin 来定义企鹅容器，使用绝对定位将其置于页面中央，并设置其大小。

.qq-penguin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 350px;
}

步骤 2：绘制企鹅的头部

现在，我们来绘制企鹅的头部。我们使用另一个 CSS 类 .qq-penguin-head，再次使用绝对定位将其置于容器顶部中央，并设置其大小、颜色和圆角。

.qq-penguin-head {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #000;
  border-radius: 50%;
}

步骤 3：绘制企鹅的身体

接下来，绘制企鹅的身体。类似于头部，我们创建 CSS 类 .qq-penguin-body，将其定位在容器的顶部中央，并设置其大小、颜色和圆角。

.qq-penguin-body {
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background-color: #000;
  border-radius: 50%;
}

步骤 4：添加企鹅的围脖

企鹅的标志性特征之一就是它的围脖。我们使用 .qq-penguin-scarf 类将其绘制出来，再次使用绝对定位将其置于容器顶部中央，并设置其大小、颜色和圆角。

.qq-penguin-scarf {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50%;
}

步骤 5：绘制企鹅的双手

是时候给我们的企鹅一些可爱的双手了。使用 .qq-penguin-arms 类，将其定位在容器顶部中央，并设置其大小、颜色和圆角。

.qq-penguin-arms {
  position: absolute;
  left: 50%;
  top: 200px;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
}

步骤 6：添加企鹅的双脚

最后但并非最不重要的一步，我们绘制企鹅的双脚。使用 .qq-penguin-feet 类，将其定位在容器顶部中央，并设置其大小、颜色和圆角。

.qq-penguin-feet {
  position: absolute;
  left: 50%;
  top: 300px;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
}