加林森 发表于 2022-5-14 17:11

海（根据老黑的教程制作的）

本帖最后由 加林森 于 2022-5-14 19:21 编辑 <br /><br /><style>
.sea {
      left: -214px;
      width: 1024px;
      height: 560px;
      background: linear-gradient(skyblue,#eee,darkblue);
      filter:url(#wave);
      clip-path: inset(16px 10px 10px15px);
      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="30" xChannelSelector="R" yChannelSelector="B" />
      </filter>
</svg>
<audio id="ymusic" src="https://www.joy127.com/url/90365.mp3" autoplay="autoplay" loop="loop"></audio>

加林森 发表于 2022-5-14 17:11

@马黑黑

马黑黑 发表于 2022-5-14 18:03

那个滤镜会让边缘锯齿画，所以要切割。主窗体：

clip-path: inset(10px);

加林森 发表于 2022-5-14 18:04

马黑黑 发表于 2022-5-14 18:03
那个滤镜会让边缘锯齿画，所以要切割。主窗体：

clip-path: inset(10px);

很厉害的。

加林森 发表于 2022-5-14 18:09

马黑黑 发表于 2022-5-14 18:03
那个滤镜会让边缘锯齿画，所以要切割。主窗体：

clip-path: inset(10px);

像不像啊？

马黑黑 发表于 2022-5-14 18:10

加林森 发表于 2022-5-14 18:09
像不像啊？

根据情况自己计算一下，上中下左右切割多少。四个参数一起用是这样：

clip-path: inset(10px, 15px, 12px, 20px)

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

加林森 发表于 2022-5-14 18:09
像不像啊？

整体是不错的

加林森 发表于 2022-5-14 18:14

马黑黑 发表于 2022-5-14 18:13
整体是不错的

嗯嗯，我再进去编辑一下，看效果。

加林森 发表于 2022-5-14 18:15

马黑黑 发表于 2022-5-14 18:10
根据情况自己计算一下，上中下左右切割多少。四个参数一起用是这样：

clip-path: inset(10px, 15px, 1 ...

我这就进去编辑

加林森 发表于 2022-5-14 18:18

马黑黑 发表于 2022-5-14 18:13
整体是不错的

现在怎么样了？

红影 发表于 2022-5-14 18:27

队长学得真快。不过我现在看着底图还是有锯齿呢{:4_204:}

马黑黑 发表于 2022-5-14 18:33

加林森 发表于 2022-5-14 18:18
现在怎么样了？

边缘不平整

加林森 发表于 2022-5-14 18:41

红影 发表于 2022-5-14 18:27
队长学得真快。不过我现在看着底图还是有锯齿呢

是的。

加林森 发表于 2022-5-14 18:41

马黑黑 发表于 2022-5-14 18:33
边缘不平整

还需要调整。

马黑黑 发表于 2022-5-14 19:17

队长，你还是用默认的割法:

clip-path: inset(10px);

由于你调整了一些参数，四周的边缘锯齿尺寸不同，你现在的这个情况，可以这么割，边缘就平整了：

clip-path: inset(16px 10px 10px15px);

加林森 发表于 2022-5-14 19:20

马黑黑 发表于 2022-5-14 19:17
队长，你还是用默认的割法:

clip-path: inset(10px);


好的好的，我去试一试。谢谢老黑。

马黑黑 发表于 2022-5-14 19:21

加林森 发表于 2022-5-14 19:20
好的好的，我去试一试。谢谢老黑。

理解 clip-path: inset(1,2,3,4) 四个参数的对应边，上右下左，就OK了

加林森 发表于 2022-5-14 19:22

马黑黑 发表于 2022-5-14 19:17
队长，你还是用默认的割法:

clip-path: inset(10px);


现在调整了，老黑再看看。

加林森 发表于 2022-5-14 19:24

马黑黑 发表于 2022-5-14 19:21
理解 clip-path: inset(1,2,3,4) 四个参数的对应边，上右下左，就OK了

哦，现在终于明白了。{:4_191:}

马黑黑 发表于 2022-5-14 19:25

加林森 发表于 2022-5-14 19:22
现在调整了，老黑再看看。

嗯，相对之前的，好多了。记住 clip-path: inset(参数1,参数2,参数3,参数4) 所对应的边分别是上右下左
页: [1] 2
查看完整版本: 海（根据老黑的教程制作的）