这个过程是这样进行的（或多或少）：

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

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

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

稍后我会更新其中一些值以使主体具有不同的颜色。

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

为了让它看起来卡哇伊，我需要大而圆的眼睛，眼睛里闪闪发光，嘴巴之间有一条半圆形的线。此外，眼睛下方还有一些椭圆形的粉红色脸颊。

.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%;
}

鳍很简单：一个元素的一侧具有 100% 的边界半径，而其他侧的边界半径为 0。这样，如果具有典型的鱼翅形状。稍后我也会将这种形状重新用于尾巴和鳍状肢！改变大小和变换（旋转和倾斜）会使它们不同。

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

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

背景也很容易改变。在其他版中，我只有一种普通的浅绿色。后来，我添加了一些额外的背景来模拟阳光和从浅色（表面）到深色（海洋深处）的渐变。

添加更多细节

回到绘图，我决定在其中添加一些细节：

底部的阴影

顶部高光部件

脸颊上有些纹理

添加更好的背景

就凭这些小东西，插画收获颇丰。真正决定成败的是小细节。这是最终结果：

变化

因为是代码，使用了变量/自定义属性，所以相对容易自定义和转换成不同的版本。这些是绘图的一些变体，代码更改很少。

一条大白鲨（同一条鲨鱼，但是使用灰色）：

蓝鲸（更大，没有鳍，身体和背景不同）：

独角鲸（颜色较浅，无鳍和长牙）：

我喜欢它们的样子，所以我把它们拿给我的孩子们看，他们看了一秒钟屏幕，然后说：“嗯！它们看起来像鱼……。” 孩子们有办法让我们保持谦虚。

王剑编程网

分享专业编程知识与实战技巧

使用 HTML 和 CSS 绘制卡哇伊鲨鱼和海洋生物

添加更多细节

变化