使用 HTML 和 CSS 绘制可爱的鲨鱼和海洋生物

整个过程大致如下：

首先，我创建了一个可以用作画布的容器（绘画画布而不是 HTML <canvas>），并通过添加适用于该容器内所有元素的样式来设置舞台。

然后我添加了一个椭圆作为主体，很简单：

.body {
  width: 80%;
  height: 60%;
  background: #369;
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

稍后我会更新其中一些值以使主体具有不同的颜色，您可以在 CodePen 上查看源代码以了解更多详细信息。

下一步是向身体添加元素：眼睛、嘴巴、脸颊、鳃、尾巴、鳍……

为了让它看起来更可爱，我需要画出一双圆圆的大眼睛，眼睛里要有神采，嘴巴之间要画一条半圆的线。此外，眼睛下方还要画一些椭圆形的粉色腮红。

.eye {
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  top: 45%;
  left: 4%;
  background: radial-gradient(circle at 32% 32%, white 14%, black 0);
}

.eye + .eye {
  left: 35%;
}

.mouth {
  border-radius: 50%;
  border: 0.5vmin solid #0000;
  border-bottom: 0.75vmin solid #000;
  border-left: 0.75vmin solid #000;
  width: 10%;
  aspect-ratio: 1;
  top: 50%;
  left: 18%;
  transform: rotate(-45deg);
}

.cheek {
  width: 10%;
  height: 7%;
  background: #fcc6;
  border-radius: 50%;
  left: 3%;
  top: 57%;
}

.cheek + .cheek {
  left: 34.5%;
}

鱼鳍很简单：一个元素，一侧的 border-radius 为 100%，其他侧的 border-radius 为 0。这样它就呈现出了典型的鲨鱼鳍形状。我以后还会把这个形状用在鱼尾和鳍状肢上！改变大小和变换（旋转和倾斜）就能让它们看起来足够不同。

.fin {
  border-radius: 100% 0 0 0;
  background: #369;
  width: 25%;
  height: 35%;
}

最后，我向主体元素（不是<body>标签）添加了一个过滤器，它有多个drop-shadow()，因此鲨鱼周围的边框会或多或少一致。

背景也很容易改变。在视频版本中，我只使用了简单的浅绿色。后来，我添加了几个额外的背景来模拟阳光，以及从浅色（水面）到深色（海底）的渐变效果。

以下是该过程的延时视频：

添加更多细节

我停止了录音，但后来又回到了绘画上，并决定添加一些细节：

底部的阴影
顶部较轻的部分
脸颊上有一些纹理
添加更漂亮的背景

正是这些细微之处，让插画增色不少。细节决定成败。最终效果如下：

变体

由于它是代码，并且使用变量/自定义属性，因此相对容易定制并转换为不同的版本。以下是一些只需少量代码更改即可实现的绘图变体。

大白鲨（同一条鲨鱼，但颜色为灰色）：

蓝鲸（体型较大，无鳍，身体背景不同）：

独角鲸（颜色较浅，无鳍，有獠牙）：

我很喜欢它们的样子，所以我把它们展示给我的孩子们看，他们看了一会儿屏幕，然后说：“咦！它们看起来像鱼……太腥了。”孩子们有办法让我们保持谦虚。

如果您喜欢这些内容，请查看我的 YouTube 频道，那里有更多包含 CSS 技巧和窍门的绘图和视频。

鏂囩珷鏉ユ簮锛�https://dev.to/alvaromontoro/drawing-kawaii-sharks-and-sea-life-with-html-and-css-fei