CSS3绘制可爱皮卡丘，我的皮卡丘更可爱

前端

2023-11-27 13:34:57

手绘皮卡丘：释放你的艺术天赋

序言

准备好迎接一场充满成就感的艺术冒险了吗？在这个动手指南中，我们将引导你一步一步手绘一只可爱的皮卡丘，用你的艺术才能创造出这个标志性的宝可梦角色。从准备工作到添加最终润色，我们将分享所有必要的步骤，让你体验到创作你自己的皮卡丘的喜悦。

准备工作：收集必需品

踏上手绘之旅之前，让我们先准备好我们所需的工具：

电脑
网页浏览器
文本编辑器（如记事本、Sublime Text 或 Visual Studio Code）
鼠标或触控板
你最喜欢的皮卡丘脸部图片（作为参考）

第一步：绘制皮卡丘的身体

打开你的文本编辑器，创建一个新文件并将其命名为“pikachu.html”。
输入以下代码：

<!DOCTYPE html>
<html>
<head>

<style>
body {
  background-color: #f0f0f0;
}

.pikachu {
  width: 200px;
  height: 200px;
  background-color: #ffeb00;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="pikachu"></div>
</body>
</html>

保存并打开文件，你会看到一个黄色的圆圈，这就是皮卡丘的身体啦！

第二步：绘制皮卡丘的脸部

在“pikachu”类中添加以下代码：

.pikachu {
  ...
  background-image: url("pikachu-face.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

将“pikachu-face.png”替换为你的皮卡丘脸部图片。
保存并刷新页面，你就能看到皮卡丘可爱的脸蛋了。

第三步：绘制皮卡丘的耳朵

在“pikachu”类中添加以下代码：

.pikachu {
  ...
  ::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: #ffeb00;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  ::after {
    content: "";
    position: absolute;
    top: -20px;
    right: 50%;
    width: 40px;
    height: 40px;
    background-color: #ffeb00;
    border-radius: 50%;
    transform: translate(50%, -50%) rotate(45deg);
  }
}

保存并刷新页面，你会看到皮卡丘标志性的尖耳朵。

第四步：绘制皮卡丘的眼睛

在“pikachu”类中添加以下代码：

.pikachu {
  ...
  ::before {
    ...
  }

  ::after {
    ...
  }

  .eyes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .eye {
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
    margin: 0 10px;
  }
}

保存并刷新页面，你会看到皮卡丘水汪汪的大眼睛。

第五步：绘制皮卡丘的嘴巴

在“pikachu”类中添加以下代码：

.pikachu {
  ...
  .eyes {
    ...
  }

  .eye {
    ...
  }

  .mouth {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 20px;
    height: 10px;
    background-color: #000;
  }
}

保存并刷新页面，你会看到皮卡丘开心的笑容。

第六步：绘制皮卡丘的腮红

在“pikachu”类中添加以下代码：

.pikachu {
  ...
  .mouth {
    ...
  }

  .blush {
    position: absolute;
    top: 70%;
    left: 20%;
    width: 10px;
    height: 10px;
    background-color: #ff0000;
    border-radius: 50%;
  }

  .blush-right {
    left: 80%;
  }
}

保存并刷新页面，你会看到皮卡丘害羞的腮红。

第七步：绘制皮卡丘的尾巴

在“pikachu”类中添加以下代码：

.pikachu {
  ...
  .blush {
    ...
  }

  .tail {
    position: absolute;
    top: 80%;
    left: 50%;
    width: 20px;
    height: 40px;
    background-color: #ffeb00;
    transform: rotate(-45deg);
  }
}