马黑黑 发表于 2022-5-13 12:22

海

<style>
.sea {
        left: -214px;
        width: 1024px;
        height: 560px;
        background: linear-gradient(skyblue,#eee,darkblue);
        filter:url(#wave);
        clip-path: inset(10px);
        overflow: hidden;
        position: relative;
}
.cloud {
        background: transparent;
        border-radius: 20% 50%;
        width: 400px;
        height: 120px;
        left: -30px;
        top: -100px;
        box-shadow: 140px 120px 60px 20px rgba(255,255,240,.95);
        filter: url(#wave);
        position: absolute;
}
</style>

<div class="sea">
        <div class="cloud"></div>
        <div class="cloud" style="transform: translate(375px,-20px) rotate(-10deg);"></div>
</div>

<svg width="0" height="0" style="position: absolute; display: none;">
        <filter id="wave">
                <feTurbulence type="turbulence" baseFrequency="0.01 .1" numOctaves="1" result="turbulence" seed="50" />
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="B" />
        </filter>
</svg>

<script>
let aud = document.createElement('iframe');
aud.src = "https://music.163.com/outchain/player?type=2&id=443895&auto=1&height=66";
aud.style.display = 'none';
document.querySelector('.sea').appendChild(aud);
</script>

红影 发表于 2022-5-13 12:47

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

马黑黑 发表于 2022-5-13 12:50

本帖最后由 马黑黑 于 2022-5-13 13:15 编辑

代码分享：
<style>
.sea {
      left: -214px;
      width: 1024px;
      height: 560px;
      background: linear-gradient(skyblue,#eee,darkblue);
      filter:url(#wave);
      clip-path: inset(10px);
      overflow: hidden;
      position: relative;
}
.cloud {
      background: transparent;
      border-radius: 20% 50%;
      width: 400px;
      height: 120px;
      left: -30px;
      top: -100px;
      box-shadow: 140px 120px 60px 20px rgba(255,255,240,.95);
      filter: url(#wave);
      position: absolute;
}
</style>

<div class="sea">
      <div class="cloud"></div>
      <div class="cloud" style="transform: translate(375px,-20px) rotate(-10deg);"></div>
</div>

<svg width="0" height="0" style="position: absolute;">
      <filter id="wave">
                <feTurbulence type="turbulence" baseFrequency="0.01 .1" numOctaves="1" result="turbulence" seed="50" />
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="B" />
      </filter>
</svg>


小辣椒 发表于 2022-5-13 12:57

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

樵歌 发表于 2022-5-13 12:58

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

樵歌 发表于 2022-5-13 12:59

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

马黑黑 发表于 2022-5-13 13:07

实现原理：

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 13:09

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

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

马黑黑 发表于 2022-5-13 13:11

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

CSS在svg加持下能耐更大的

马黑黑 发表于 2022-5-13 13:12

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

感觉有点粗糙呢

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

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

喝茶喝茶{:4_190:}

小辣椒 发表于 2022-5-13 13:14

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

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

马黑黑 发表于 2022-5-13 13:17

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

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

加林森 发表于 2022-5-13 13:21

本帖最后由 加林森 于 2022-5-13 13:32 编辑

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

小辣椒 发表于 2022-5-13 13:27

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

黑黑真的万能啊。。。佩服S{:4_178:}

红影 发表于 2022-5-13 15:13

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

非常超乎想象{:4_199:}

樵歌 发表于 2022-5-13 17:34

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

其它人不管只想你做出来{:4_189:}

樵歌 发表于 2022-5-13 17:35

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

喝多了难得跑厕所{:4_189:}

马黑黑 发表于 2022-5-13 19:07

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

尿点是个问题

马黑黑 发表于 2022-5-13 19:07

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

儿童不宜
页: [1] 2 3 4
查看完整版本: 海