海

马黑黑

红影

看起来跟图片一样，竟然全是代码模拟出来的。非常有真实感，黑黑太棒了

马黑黑

代码分享：

1. <style>
   
2. .sea {
   
3.         left: -214px;
   
4.         width: 1024px;
   
5.         height: 560px;
   
6.         background: linear-gradient(skyblue,#eee,darkblue);
   
7.         filter:url(#wave);
   
8.         clip-path: inset(10px);
   
9.         overflow: hidden;
   
10.         position: relative;
    
11. }
    
12. .cloud {
    
13.         background: transparent;
    
14.         border-radius: 20% 50%;
    
15.         width: 400px;
    
16.         height: 120px;
    
17.         left: -30px;
    
18.         top: -100px;
    
19.         box-shadow: 140px 120px 60px 20px rgba(255,255,240,.95);
    
20.         filter: url(#wave);
    
21.         position: absolute;
    
22. }
    
23. </style>
    
24. 
    
25. <div class="sea">
    
26.         <div class="cloud"></div>
    
27.         <div class="cloud" style="transform: translate(375px,-20px) rotate(-10deg);"></div>
    
28. </div>
    
29. 
    
30. <svg width="0" height="0" style="position: absolute;">
    
31.         <filter id="wave">
    
32.                 <feTurbulence type="turbulence" baseFrequency="0.01 .1" numOctaves="1" result="turbulence" seed="50" />
    
33.                 <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="B" />
    
34.         </filter>
    
35. </svg>
    

复制代码

小辣椒

蓝色的海洋，白云飘飘，黑黑无所不能，css太强大来了

樵歌

竟然代码出天空大海来，简直逆天了你！

樵歌

你哪天再代个美女出来（不准用图图）给俺们瞅瞅

马黑黑

实现原理：

HTML和CSS部分相对简单，不多说，说说svg滤镜。但svg滤镜又非常复杂，所以，只简单说说。

本帖，svg的作用仅在于提供两个滤镜：

其一：feTurburence ，是一个利用柏林噪声算法弄出来的滤镜，作用是令对象无序化，“躁”起来；
其二：feDisplacementMap，位置置换滤镜，用于改变元素和图形等对象的像素位置。

这二货结合起来使用，可以生成逼近鬼斧神工的自然界才会存在的各种纹理等，比如云层、烟雾、大理石和水纹。

然后，svg的滤镜id，看 <filter id="wave"> 这一句，wave 就是 svg滤镜的id了，它要关联到需要运用svg滤镜的元素中，具体做法是在CSS代码中绑定滤镜。本例，两个选择器，.sea 和 .cloud ，都有这一句代码：

filter:url(#wave);

表明它们都使用svg id 为 wave 的滤镜。上方的云层，海洋的波纹，都是借助 svg 滤镜实现的。

最后提示一下：本例中，云层实体元素不可见（背景透明），我们看到的是它的投影，用 box-shadow 属性弄出来的。

马黑黑

樵歌 发表于 2022-5-13 12:59
你哪天再代个美女出来（不准用图图）给俺们瞅瞅

这个有人做过的，效果与当代油画差不多

马黑黑

红影 发表于 2022-5-13 12:47
看起来跟图片一样，竟然全是代码模拟出来的。非常有真实感，黑黑太棒了

CSS在svg加持下能耐更大的

马黑黑

小辣椒 发表于 2022-5-13 12:57
蓝色的海洋，白云飘飘，黑黑无所不能，css太强大来了

感觉有点粗糙呢

马黑黑

樵歌 发表于 2022-5-13 12:58
竟然代码出天空大海来，简直逆天了你！

喝茶喝茶

小辣椒

马黑黑 发表于 2022-5-13 13:12
感觉有点粗糙呢

这个云应该没有边框的痕迹，边缘有椭圆形的最好，黑黑这个可能有难度吧

马黑黑

小辣椒 发表于 2022-5-13 13:14
这个云应该没有边框的痕迹，边缘有椭圆形的最好，黑黑这个可能有难度吧

我故意弄长了一点，然后没有设置为纯圆。做好我其看了一下天空，西边的云长的和我画的形状很接近。云朵的形状很随机，什么都有。

加林森

哇噻，老黑的这个制作真是逆天了啊。看云好像也在移动，看海好像在漂流。厉害了。

小辣椒

马黑黑 发表于 2022-5-13 13:17
我故意弄长了一点，然后没有设置为纯圆。做好我其看了一下天空，西边的云长的和我画的形状很接近。云朵的 ...

黑黑真的万能啊。。。佩服S

红影

马黑黑 发表于 2022-5-13 13:11
CSS在svg加持下能耐更大的

非常超乎想象

樵歌

马黑黑 发表于 2022-5-13 13:09
这个有人做过的，效果与当代油画差不多

其它人不管只想你做出来

樵歌

马黑黑 发表于 2022-5-13 13:13
喝茶喝茶

喝多了难得跑厕所

马黑黑

樵歌 发表于 2022-5-13 17:35
喝多了难得跑厕所

尿点是个问题

马黑黑

樵歌 发表于 2022-5-13 17:34
其它人不管只想你做出来

儿童不宜