【译】来用 SVG 和 CSS 画朵云彩吧

摘要：希腊神话中有这样一个故事是讲述宙斯创造出来一个云女神涅斐勒，并且类似大多数的希腊神话一样的，这个故事非常的奇异且限制级。我们能够知道的是涅斐勒是由宙斯以他自己美丽的妻子的形象创造的。

希腊神话中有这样一个故事是讲述宙斯创造出来一个云女神涅斐勒，并且类似大多数的希腊神话一样的，这个故事非常的奇异且限制级。下面一个简短克制的版本。

我们能够知道的是： 涅斐勒是由宙斯以他自己美丽的妻子的形象创造的。一个凡人遇见涅斐勒，陷入爱河，并且他们一起有了一个孩子，确切的说是一个半人半马的婴儿。

很怪诞对吧，值得庆幸的是，在浏览器中创建云的过程要简单得多，而且风险要小得多。

(Demo)

最近，我发现开发者Yuan Chuan 已经实现了用代码生成逼真的云。对我来说，浏览器中的云这个概念一直如同希腊神话中的那边神秘。

让我们来看一下这个’画笔‘吧 （点这里），可以见到的是作者通过使用 box-shadow 作为包含两个滤镜的  元素的补充实现了这个令人惊叹的‘云图’！

想要绘制出兼顾写实和精致的云图，需要搭配使用feTurbulence 和feDisplacementMap这两个滤镜。这两个滤镜不仅可以具有强大且复杂的功能，并且还可以提供一些令人兴奋的特性（其中包含奥斯卡获奖算法)）！当然，这些功能在浏览器‘引擎盖’下有着令人生畏的复杂性。

虽然这些 SVG 滤镜的物理特性超出了本文的范围，但 MDN 和 w3.org 上提供了大量文档供学习参考。另外还有 feTurbulence 和 feDisplacement 介绍。

对于本文，我们将专注于学习使用这些 SVG 滤镜来实现令人惊奇的效果。滤镜背后的实现算法并不在我们的研究范围内，就像艺术家虽然可以绘制出美丽的景观但却不用懂得油漆的分子结构。

而我们需要做的只是密切关注一小部分 SVG 属性，这些属性使得我们可以在浏览器中绘制逼真的云图。通过学习这些属性可以让我们在项目中按照自己的意愿更好的制作出特定的滤镜效果。

一些必要的前置基础知识

CSS 规则 box-shadow的五个值得关注的属性：

box-shadow:

让我们来增大这些值（可能会高于正常的开发者会做的），这样在视图的右下方就会有阴影出现。 !

#cloud-square {
        background: turquoise;
        box-shadow: 200px 200px 50px 0px #000;
        width: 180px;
        height: 180px;
    }
    
    #cloud-circle {
        background: coral;
        border-radius: 50%;
        box-shadow: 200px 200px 50px 0px #000;
        width: 180px;
        height: 180px;
    }

你肯定表演或者见过过皮影戏吧？
Double-M

类似于通过改变手的形状来改变阴影的方式，我们的 HTML 中的“源形状”可以通过移动或者变形来同步影响其在浏览器中呈现的阴影的形状。box-shadow 复制原始图形的圆角效果。SVG 滤镜对于元素都以及元素的shadow 的都会生效。

到目前为止，上面的 SVG 标签不会被渲染出来的，因为我们没有定义任何视觉样式（更不用说零宽度、高度）。它的唯一目的是保持我们喂养的过滤器 SourceGraphic（也就是我们的

）。我们的源

和它的阴影都被滤波器独立地扭曲。

我们通过 ID 选择器(#cloud-circle) 将下面的 CSS 规则添加到目标元素上：

#cloud-circle {
        filter: url(#filter);
        box-shadow: 200px 200px 50px 0px #fff;
    }

看这里！

好吧，添加上 SVG 滤镜依旧没能给我们带来什么惊喜。

(Demo)

别担心！这才仅仅只是开始，更有趣的还在后面。

测试 feDisplacementMap scale 属性

使用这一属性进行的一些实验可以产生显著的效果。暂时，让我们保持它的 feTurbulence 不变，只调整 DisplacementMap 的 scale 属性。

随着 scale 的增加（每次增加 30 ），我们的源

开始扭曲变形且它的投下阴影更接近天空中云随机的形状。

The    scale attribute incremented by values of 30. (Demo)

好的，通过改变 scale ,好像终于接近了正确云形状的的数值范围！让我们稍微改变下颜色，以便看起来更像一朵 云彩 ☁️。

body {
        background: linear-gradient(165deg, #527785 0%, #7fb4c7 100%);
    }
    
    #cloud-circle {
        width: 180px;
        height: 180px;
        background: #000;
        border-radius: 50%;
        filter: url(#filter);
        box-shadow: 200px 200px 50px 0px #fff;
    }

现在我们的图形越来越接近真实的云效果了！

调整 box-shadow 的值

下面的一组图像显示了 blur 对 box-shadow 效果的影响。下面的图形中 blur 的数组依次递增。

The    cloud becomes "softer" as the blur value increases.

为了使我们的云带有一些积云效果，可以稍微扩大

的尺寸。

#cloud-circle {
        width: 500px;
        height: 275px;
        background: #000;
        border-radius: 50%;
        filter: url(#filter);
        box-shadow: 200px 200px 60px 0px #fff;
    }

好的，但是现在的源div 元素正在成为障碍。