画云

马黑黑 · 发表于 2022-5-14 12:00

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

自然界中虽然有黑云、乌云，但我们可以假装一下云的颜色总是白色系列的，故此我们需要给即将展示的云一个能呈现白色的背景：

.stage {
   margin: auto;
   width: 600px;
   height: 460px;
   padding: 20px;
   background: linear-gradient(rgb(46, 109, 135), rgb(110, 180, 2));
}

然后就是云了：

.cloud {
   background: #fff;
   border-radius: 50%;
   width: 200px;
   height: 200px;
}

正如你应该能从CSS代码中看得出来的，下面的HTML代码得出的将是一个满月的场景：

   <div class="stage">
      <div class="cloud"></div>
   </div>

嗯，由于云的形状是随机性的，CSS+HTML要把云朵呈现出来有些难度，这二货可能更擅长画月亮。好在HTML有个表亲还挺能干的，它可以为HTML画云提供帮助，它就是svg，所提供的是两个滤镜组合，和HTML代码放在一起：

<svg width="0" height="0">
   <filter id="cloud">
      <feTurbulence type="fractalNoise" baseFrequency=".015" numOctaves="5" />
      <feDisplacementMap in="SourceGraphic" scale="180" />
   </filter>
</svg>

看 svg 的宽高都设置为 0，它这可是学雷锋，甘愿牺牲自己，只为老表做助理：它提供两个滤镜组合，一个是 feTurbulence，制造柏林噪声的湍流滤镜，另一个是 feDisplacementMap，像素位置置换滤镜，能令元素和图像产生位移效果。两个滤镜封装在filter标签里，我们只需要在 .cloud 选择器中使用filter属性、通过url导入其id即可：

filter: url(#cloud);

呐呢？这也不是云呀？哎哎，要有想象力……我不是说要把上面的结果想象成云，而是通过想象力去进行再创造。svg老表的两个滤镜已经将圆弄散弄乱了，下来就是靠自己了。我们要做的是将上面的散乱了的元素投影出去，用CSS的 box-shadow 属性去实现，将下面的代码加入到 .cloud 选择器中：

.shadow { box-shadow: 300px 50px 60px 20px ghostwhite; }

再将云的主体元素背景设为透明，最终效果如下：

这样的效果可以满意了。我们还可以通过改变 .cloud 选择器的尺寸、边框属性以及盒子阴影的其他参数来获得更多的效果，还可以通过旋转、扭曲、多元素组合等手段制造更为精彩的云层。

最后提一下，将元素设为背景透明并不能完美呈现出云朵，最好再使用定位方式将主体元素置于舞台以外并设置舞台区域外的内容不可见，令其彻底牺牲自我，将位置完完整整让出来供其影子独享。此外，svg 两个滤镜的参数也是可以微调的，可以尝试一下。