画云
<style>.outer { margin: auto; width: 760px; font: normal 1em /1.5em sans-serif; }
.outer p { margin: 8px 0; padding: 0; }
.outer pre { margin: 0; padding: 0;}
.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;
}
.filter { filter: url(#cloud); }
.shadow { box-shadow: 300px 50px 60px 20px ghostwhite; }
.transparent { background: transparent; }
</style>
<div class="outer">
<p>自然界中虽然有黑云、乌云，但我们可以假装一下云的颜色总是白色系列的，故此我们需要给即将展示的云一个能呈现白色的背景：</p>
<pre><span style="color: red;">.stage </span>{
<span style="color: blue;">margin</span>: auto;
<span style="color: blue;">width</span>: 600px;
<span style="color: blue;">height</span>: 460px;
<span style="color: blue;">padding</span>: 20px;
<span style="color: blue;">background</span>: linear-gradient(rgb(46, 109, 135), rgb(110, 180, 2));
}
</pre>
<p>然后就是云了：</p>
<pre><span style="color: red;">.cloud </span>{
<span style="color: blue;">background</span>: #fff;
<span style="color: blue;">border-radius</span>: 50%;
<span style="color: blue;">width</span>: 200px;
<span style="color: blue;">height</span>: 200px;
} </pre>
<p>正如你应该能从CSS代码中看得出来的，下面的HTML代码得出的将是一个满月的场景：</p>
<pre> <<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"stage"</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"cloud"</span>><<span style="color: darkred">/div</span>>
<<span style="color: darkred">/div</span>>
</pre>
<div class="stage">
<div class="cloud"></div>
</div>
<p>嗯，由于云的形状是随机性的，CSS+HTML要把云朵呈现出来有些难度，这二货可能更擅长画月亮。好在HTML有个表亲还挺能干的，它可以为HTML画云提供帮助，它就是svg，所提供的是两个滤镜组合，和HTML代码放在一起：</p>
<pre><<span style="color:darkred">svg</span> <span style="color: red">width</span><span style="color: blue">=</span><span style="color: magenta">"0"</span> <span style="color: red">height</span><span style="color: blue">=</span><span style="color: magenta">"0"</span>>
<<span style="color:darkred">filter</span> <span style="color: red">id</span><span style="color: blue">=</span><span style="color: magenta">"cloud"</span>>
<<span style="color:darkred">feTurbulence</span> <span style="color: red">type</span><span style="color: blue">=</span><span style="color: magenta">"fractalNoise"</span> <span style="color: red">baseFrequency</span><span style="color: blue">=</span><span style="color: magenta">".015"</span> <span style="color: red">numOctaves</span><span style="color: blue">=</span><span style="color: magenta">"5"</span> />
<<span style="color:darkred">feDisplacementMap</span> <span style="color: red">in</span><span style="color: blue">=</span><span style="color: magenta">"SourceGraphic"</span> <span style="color: red">scale</span><span style="color: blue">=</span><span style="color: magenta">"180"</span> />
<<span style="color: darkred">/filter</span>>
<<span style="color: darkred">/svg</span>>
</pre>
<p>看 svg 的宽高都设置为 0，它这可是学雷锋，甘愿牺牲自己，只为老表做助理：它提供两个滤镜组合，一个是 feTurbulence，制造柏林噪声的湍流滤镜，另一个是 feDisplacementMap，像素位置置换滤镜，能令元素和图像产生位移效果。两个滤镜封装在filter标签里，我们只需要在 .cloud 选择器中使用filter属性、通过url导入其id即可：</p>
<p><span style="color: blue;">filter</span>: url(#cloud);<br> </p>
<div class="stage">
<div class="cloud filter"></div>
</div>
<p>呐呢？这也不是云呀？哎哎，要有想象力……我不是说要把上面的结果想象成云，而是通过想象力去进行再创造。svg老表的两个滤镜已经将圆弄散弄乱了，下来就是靠自己了。我们要做的是将上面的散乱了的元素投影出去，用CSS的 box-shadow 属性去实现，将下面的代码加入到 .cloud 选择器中：</p>
<p><span style="color: red;">.shadow </span>{ <span style="color: blue;">box-shadow</span>: 300px 50px 60px 20px ghostwhite; }</p>
<div class="stage">
<div class="cloud filter shadow"></div>
</div>
<p>再将云的主体元素背景设为透明，最终效果如下：</p>
<div class="stage">
<div class="cloud filter shadow transparent"></div>
</div>
<p>这样的效果可以满意了。我们还可以通过改变 .cloud 选择器的尺寸、边框属性以及盒子阴影的其他参数来获得更多的效果，还可以通过旋转、扭曲、多元素组合等手段制造更为精彩的云层。</p>
<p>最后提一下，将元素设为背景透明并不能完美呈现出云朵，最好再使用定位方式将主体元素置于舞台以外并设置舞台区域外的内容不可见，令其彻底牺牲自我，将位置完完整整让出来供其影子独享。此外，svg 两个滤镜的参数也是可以微调的，可以尝试一下。</p>
<svg width="0" height="0">
<filter id="cloud">
<feTurbulence type="fractalNoise" baseFrequency=".015" numOctaves="5"></feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="180"></feDisplacementMap>
</filter>
</svg>
</div>
老黑辛苦 {:4_191:}{:4_179:}讲解的很用心，空了学习！周末快乐！
{:4_204:}{:4_199:} 大猫咪 发表于 2022-5-14 12:07
老黑辛苦 讲解的很用心，空了学习！周末快乐！
周末好 把月亮变成云，这一步步的好神奇啊{:4_199:} 红影 发表于 2022-5-14 12:20
把月亮变成云，这一步步的好神奇啊
这里面有影子的功劳{:4_170:} 嗯嗯，这个很像了呢，太棒了。谢谢黑黑{:4_187:} 红影 发表于 2022-5-14 12:21
嗯嗯，这个很像了呢，太棒了。谢谢黑黑
可以尝试去使用了 马黑黑 发表于 2022-5-14 12:21
这里面有影子的功劳
说说清楚呀，是投影的功劳好不好{:4_189:} 红影 发表于 2022-5-14 12:27
说说清楚呀，是投影的功劳好不好
投出的不就是影子吗 原来黑黑已经完成了，赞极了{:4_178:} 小辣椒 发表于 2022-5-14 12:51
原来黑黑已经完成了，赞极了
这个早写好的，今天想起才发出来 黑黑朋友下午好！
授教固有方,桃李满天下。
你辛勤教学辛苦了！ 梦油 发表于 2022-5-14 16:42
黑黑朋友下午好！
授教固有方,桃李满天下。
你辛勤教学辛苦了！
{:4_180:} 马黑黑 发表于 2022-5-14 12:24
可以尝试去使用了
还没弄明白呢，等弄明白了去使用{:4_187:} 马黑黑 发表于 2022-5-14 12:37
投出的不就是影子吗
这个也对，不过怎么听着还是怪怪的{:4_170:} 红影 发表于 2022-5-15 10:42
这个也对，不过怎么听着还是怪怪的
你多想了 红影 发表于 2022-5-15 10:41
还没弄明白呢，等弄明白了去使用
按理这个好理解 马黑黑 发表于 2022-5-15 10:46
你多想了
好吧，那就影子的功劳吧{:4_189:} 马黑黑 发表于 2022-5-15 10:47
按理这个好理解
那个滤镜里一大堆的英文，我得好好去看看都什么意思。 红影 发表于 2022-5-15 12:33
那个滤镜里一大堆的英文，我得好好去看看都什么意思。
不用去理解滤镜，但可以去修改滤镜里的几个数值
页:
[1]
2