画一朵真实的云，只要SVG与CSS

2023-11-04 14:19:53

使用SVG与CSS绘就真实的云朵

在希腊神话中，有一个关于宙斯创造云女神涅斐勒的故事，一如其它希腊神话，该故事怪异离奇，且具有一定的限制级性质。以下简述一个相对含蓄的版本（警告：18岁以下人员请绕行）。据称，涅斐勒（云神）是宙斯以其貌美无比的妻子为原型创造的。传说有一名凡人邂逅涅斐勒，一见钟情，并且在一头雾水中坠入了爱河……

我想，让这个故事停留在这种浪漫的基调上，就不再继续深入讲述了。我并非是要试图重新创作希腊神话，而是想和你分享另一个有关“云”的故事，一个更加艺术且更具技术性的故事。

神奇的SVG和CSS

让我们将注意力转向当今世界，确切地说是转向网络领域，我们将使用两种强大的工具——SVG和CSS——来创造一朵数字化的云朵。

SVG（可缩放矢量图形）是一种用于二维图形的XML标记语言。它独立于分辨率，因此可以被无损放大或缩小。CSS（层叠样式表）是一种用于网页元素外观的语言。它允许你控制元素的颜色、大小、字体、背景等属性。

利用SVG和CSS绘制云朵的步骤

创建一个SVG画布：

<svg width="100%" height="100%" viewBox="0 0 100 100">
</svg>

使用路径元素绘制云朵轮廓：

<path id="cloud" fill="#ffffff" d="M30 50 C45 25, 75 15, 100 25 C125 35, 150 60, 100 75 C50 90, 25 75, 30 50 Z" />

添加阴影：

<filter id="shadow">
  <feGaussianBlur stdDeviation="5" />
  <feOffset dx="3" dy="3" />
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5" />
  </feComponentTransfer>
</filter>

<path id="shadow-cloud" fill="#000000" filter="url(#shadow)" d="M30 50 C45 25, 75 15, 100 25 C125 35, 150 60, 100 75 C50 90, 25 75, 30 50 Z" />

使用CSS来控制云朵的大小、位置和动画：

#cloud {
  transform: translate(-50%, -50%);
  animation: move 10s infinite alternate;
}

@keyframes move {
  0% { transform: translate(-50%, -50%) }
  50% { transform: translate(50%, 50%) }
  100% { transform: translate(-50%, -50%) }
}