开始用 CSS 艺术创作——一步步教你画一只绵羊！

2025-06-07

开始用 CSS 艺术创作——一步步教你画一只绵羊！

我最近完成了 100 天 CSS 艺术之旅的中点 - 自从开始以来我学到了很多东西 - 你可以在我上一篇文章中阅读：

s_aitchison

50 天 CSS 艺术课程的 5 个教训

Suzanne Aitchison ・ 2020 年 7 月 4 日 ・ 阅读时长 4 分钟

#css #codepen #showdev #webdev

我亲身体验过，开始使用 CSS 艺术创作可能会令人望而生畏，希望在这篇文章中，我将向您展示这是完全可以实现的，因为我们将一步一步地制作这只可爱的小羊。

通过制作这只羊，你将学到什么

每一步后的检查点

在 5 个步骤的每个步骤结束时，都有一个 CodePen 向您展示我们在该步骤结束前所涵盖的代码和结果，这样您就不会落后！

如果说明中有任何不清楚的地方，请跳到 CodePen 并仔细查看；希望一切都会变得清晰。

步骤 1：设置画布

在CodePen （或任何你喜欢创建代码的地方！）中创建一个新的画笔。第一步是准备好你的“画布”——也就是你将在其中创建图像的页面区域。

选择背景颜色

首先，我们将设置body元素的背景颜色 - 我选择了漂亮的草绿色，但您可以随意使用任何您喜欢的时髦颜色！

body {
  background: #54a865;
}
Enter fullscreen mode Exit fullscreen mode

创建一个框并定位中心

我创建了一个div类名为“sheep”的画布。宽和高都设为 180px，并且我们还会给它留出一些边距，让它在页面上看起来更美观。

<body>
  <div class="sheep"></div>
</body>
Enter fullscreen mode Exit fullscreen mode 
.sheep {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 180px;
  height: 180px;
}
Enter fullscreen mode Exit fullscreen mode

注意属性position: relative。这很重要，因为在画布内部我们将使用绝对定位。通过在此处将位置设置为“相对”，画布的内容将相对于此画布进行定位。

通过添加临时画布背景为自己提供指导

我暂时设置了“绵羊”的背景pink，纯粹是为了能看清画布的位置，并检查它的位置是否正确。选择你喜欢的颜色就好！

工作正在进行中——第 1 步结束：

检查目前为止您应该拥有的内容：

第 2 步 - 制作一些绒毛

羊身上最重要的部分是什么？绒毛！

这只羊身上的绒毛要分成两半——左边和右边。每边我们画三个重叠的圆圈，像这样：

图中显示了左侧和右侧的 3 个绒毛部分，以线划分

添加一个 CSS 变量来表示绒毛大小

如上所示，我们总共有六个绒毛块，它们的大小相同。当你有一个要在多个 CSS 选择器之间共享的属性时，最好为它们创建一个 CSS 属性/变量。

这使您可以在一个地方轻松访问和更改属性，而不必遍历代码中的多个地方。

我们可以在文档的根目录下创建这个 fluff size 变量，如下所示：

:root {
  --fluff-size: 70px;
}
Enter fullscreen mode Exit fullscreen mode

现在，无论何时我们想要获取绒毛尺寸（例如，所有绒毛片的宽度和高度），我们都可以使用var(--fluff-size)它来获取它！

制作中间的绒毛部分

中间的绒毛部分将使用 div 元素创建：
<div class="fluff left"></div>
<div class="fluff right"></div>

共享fluff类将包含我们的大部分样式：

.fluff {
  position: absolute;
  width: var(--fluff-size);
  height: var(--fluff-size);
  border-radius: 50%;
  background: white;
  top: 50px;
}
Enter fullscreen mode Exit fullscreen mode

然后我们可以使用额外的left/right类名来正确定位每一侧。

左侧将被定位在。left: 0由于这是绝对定位元素的默认设置，我们不需要添加任何内容 - 耶！

右侧将位于右侧，我们可以这样做：

.fluff.right {
  right: 0;
}
Enter fullscreen mode Exit fullscreen mode

创建上部绒毛部分

为此，我们将使用::before伪元素。我使用它纯粹是为了减少 HTML 代码量。使用伪.fluff::before元素会将元素设置为任何带有该类的元素的第一个子元素.fluff- 例如

<div class="fluff left">
  <!--  ::before fluff appears as if entered here      -->
</div>
Enter fullscreen mode Exit fullscreen mode

我们希望将上部绒毛元素的位置定位得比父.fluffdiv 略高一些，并且更靠近中心。

我们可以使用共享fluff类来完成大部分工作：

.fluff::before {
  content: "";
  position: absolute;
  width: var(--fluff-size);
  height: var(--fluff-size);
  border-radius: 50%;
  background: white;
  top: -35px;
}
Enter fullscreen mode Exit fullscreen mode

然后我们可以再次利用left/right类将每一侧移近中心，如下所示：

.fluff.left::before {
  left: 35px;
}

.fluff.right::before {
  left: -35px;
}
Enter fullscreen mode Exit fullscreen mode

创建下部绒毛部分

这与上一步非常相似。这次我们将使用::after伪元素。使用伪元素.fluff::after会将元素放置为任何带有该类的元素的最后一个子元素.fluff- 例如

<div class="fluff left">
  <!--  ::before fluff appears as if entered here      -->
  <!--  ::after fluff appears as if entered here      -->
</div>
Enter fullscreen mode Exit fullscreen mode

与上述步骤类似，我们将使用主fluff类来指定大多数样式，并使用左/右类将每个下部绒毛片推到中心。

工作正在进行中——第 2 步结束：

这样，我们的绒毛就被创造出来了——看看我们目前所拥有的：

步骤 3 - 添加带耳朵的头部

现在我们有了一些绒毛，但我们需要一个头部！我们将使用一个带有类名的 divhead来创建它，并将其样式设置为圆形和黑色。

.head {
  position: absolute;
  width: 70px;
  height: 70px;
  background: black;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

我们还将再次使用::before伪::after元素 - 这次是制作耳朵。

耳朵是椭圆形，背景色为黑色。为了确保宽度和高度完全相同，我们为它们添加一些变量：

:root {
  --fluff-size: 70px;
  --ear-width: 15px;
  --ear-height: 20px;
}
Enter fullscreen mode Exit fullscreen mode

定位头部

我们要确保头部位于身体的中心。一种方法是计算一些数字，算出我们想要将它放置在身体左侧的像素数。

更简单的方法（我认为）是使用以下内容：

left: 50%;
transform: translateX(-50%);
Enter fullscreen mode Exit fullscreen mode

这样做的目的是：

  • 使用left属性将 head 的起始位置设置为父 div（即我们在步骤 1 中创建的画布）的 50%。我们的画布宽度为 180px，因此这相当于left: 90px
  • 使用translateX变换将头部向左移动。向左移动的量是头部宽度的 50%。我们的头部宽度为 70px，因此这与translateX(-35px)
  • 两者结合将头部中心（即 35px）置于父级中心

工作正在进行中——第 3 步结束：

你可以在下面的 CodePen 中查看耳朵的位置和尺寸，或者先尝试选择你自己的耳朵！完成此步骤后，你应该得到类似这样的效果：

步骤 4：添加一些面部特征！

我们想要一只笑脸绵羊，所以先添加一些眼睛。我们将使用与之前非常相似的样式，在 head 内创建两个 HTML 元素：

<div class="head">
  <div class="eye left"></div>
  <div class="eye right"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

我们将使用边框使其看起来像白色眼睛内的黑色瞳孔：

.eye {
  position: absolute;
  background: black;
  border: 5px solid white;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  top: 15px;
}
Enter fullscreen mode Exit fullscreen mode

然后，您可以使用left和right类来按照您喜欢的方式定位每只眼睛（如果您不确定，请查看下面正在进行的工作 CodePen！）

使用 clip-path 创建嘴巴

clip-path这是一个非常有用的 CSS 属性。它可以有效地为 HTML 元素创建一个遮罩，只允许显示其中的一部分。

在这种情况下，我们将使用它将一个块变成一个半圆形。

让我们从头部的 HTML 元素开始<div class="mouth"></div>。我们将它设置为白色块状样式，并像步骤 3 中一样将其放置在头部的中心位置。

.mouth {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  width: 30px;
  height: 30px;
}
Enter fullscreen mode Exit fullscreen mode

使用 Clippy 塑造你的嘴形

Clippy是一款非常棒的工具，可以轻松创建 clip-path 代码。访问该网站，选择右侧的圆形选项，然后拖动元素即可创建所需的半圆形。

它生成的代码看起来有点像：

clip-path: circle(50% at 50% 0);

随意选择嘴巴的其他形状并随心所欲地玩弄 Clippy！

准备就绪后，将clip-path属性添加到 CSS 中.mouth，并调整垂直位置以适应。这就是我现在的效果：

.mouth {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  width: 30px;
  height: 30px;
  clip-path: circle(50% at 50% 0);
}
Enter fullscreen mode Exit fullscreen mode

工作正在进行中 - 步骤 4 结束

你快到终点了！目前为止，你应该看到类似这样的内容：

步骤 5：添加腿并完成！

这里没有什么新技术，腿部的代码现在看起来应该相当熟悉了。您需要创建两个新的 HTML 元素：

<div class="leg left"></div>
<div class="leg right"></div>
Enter fullscreen mode Exit fullscreen mode

确保将它们放在无关元素和你创建的其他代码之前。这样可以确保它们位于所有其他代码之后。

每条腿都是一个黑色矩形，具有轻微的边框半径，以消除任何尖角：

.leg {
  position: absolute;
  top: 120px;
  height: 50px;
  width: 15px;
  background: black;
  border-radius: 30%;
}
Enter fullscreen mode Exit fullscreen mode

然后，我们可以使用left/right类来定位每条腿。我使用了与步骤 3 中相同的定位技巧，使每条腿位于两侧各 30% 的位置，即

.leg.left {
  left: 30%;
  transform: translateX(-30%);
}

.leg.right {
  right: 30%;
  transform: translateX(30%);
}
Enter fullscreen mode Exit fullscreen mode

整理

现在您已将所有元素放置到位，是时候进行清理了，删除我们在步骤 1 中添加到画布上的粉红色背景，并删除不再需要的任何多余代码注释！

哒哒！

你现在应该有一只完成的羊，有点像这样：

恭喜！如果这是你的第一件 CSS 作品，那真的太棒了！

围捕

让我们看一下现在可以在 CSS 艺术中重复使用哪些技术：

  • 垂直和水平定位项目，包括使用 % 值
  • 使用 clip-path 制作形状
  • 使用::before和::after保存大量额外的 HTML 元素
  • 使用 CSS 变量

惊人的！

感谢你坚持到最后——如果你真的按照本教程制作了一只小绵羊，我绝对想看看！在评论区留下你的 Codepen 链接，让我们一起欣赏它的精彩吧😃🐑

文章来源：https://dev.to/s_aitchison/get-started-with-css-art-make-a-sheep-step-by-step-cbf
Devto 翻译
PREV
双枢轴快速排序：Java 针对原始数据类型的默认排序算法。
NEXT
2020 年 Web 开发人员的 7 个决心