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

小辣椒来看看云

<style>
.outer {
        left: -214px;
        background: linear-gradient(rgb(46, 109, 135), rgb(110, 180, 2));
        width: 1024px;
        height: 600px;
        position: relative;
}
.cloud-normal {
        background: transparent;
        border-radius:100% 0%;
        box-shadow: 140px 120px 60px 20px ghostwhite;
        width: 200px;
        height: 200px;
        left: 400px;
        top: -100px;
        filter: url(#cloud);
        position: absolute;
}
.cloud-small {
        width: 100px;
        height: 100px;
        left: 650px;
        top: -50px;
}
</style>

<div class="outer">
        <div class="cloud-normal"></div>
        <div class="cloud-normal cloud-small"></div>
</div>

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

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

这个，边缘应该可以了吧

加林森 发表于 2022-5-13 20:52

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

我先帮着看看，。真漂亮，老黑的制作真是好啊。{:4_199:}

大猫咪 发表于 2022-5-13 21:08

真漂亮！慢慢学习   {:4_187:}   老黑辛苦{:4_190:}

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

大猫咪 发表于 2022-5-13 21:08
真漂亮！慢慢学习      老黑辛苦

{:4_180:}

红影 发表于 2022-5-13 22:39

太神奇了，非常真实的感觉{:4_199:}

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

红影 发表于 2022-5-13 22:39
太神奇了，非常真实的感觉

烟雾、云朵是这两个滤镜合作时最擅长的，有些值调整一下效果还要好，但算法太吃计算机资源，几年前装的机器可能会有点吃力

醉美水芙蓉 发表于 2022-5-14 07:09

红影 发表于 2022-5-14 11:24

马黑黑 发表于 2022-5-13 23:01
烟雾、云朵是这两个滤镜合作时最擅长的，有些值调整一下效果还要好，但算法太吃计算机资源，几年前装的机 ...

JS真强大{:4_199:}

马黑黑 发表于 2022-5-14 12:09

红影 发表于 2022-5-14 11:24
JS真强大

svg厉害。svg更面向细节，从而难度也更大

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

醉美水芙蓉 发表于 2022-5-14 07:09
太神奇了！黑黑老师真厉害！

我一般，但这个世界充满神奇

加林森 发表于 2022-5-14 12:37

再来瞧瞧

小辣椒 发表于 2022-5-14 12:54

马黑黑 发表于 2022-5-13 20:40
这个，边缘应该可以了吧

很像了，黑黑你真的太强大了，想什么就出来什么{:4_189:}

小辣椒 发表于 2022-5-14 12:56

刚才这个没有看见，上来还去发了云的png图片{:4_173:}

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

小辣椒 发表于 2022-5-14 12:56
刚才这个没有看见，上来还去发了云的png图片

这个可以接受吧

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

小辣椒 发表于 2022-5-14 12:54
很像了，黑黑你真的太强大了，想什么就出来什么

懂得原理都可以的

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

马黑黑 发表于 2022-5-14 13:36
这个可以接受吧

太美了。逼真{:4_199:}

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

马黑黑 发表于 2022-5-14 13:37
懂得原理都可以的

这个原理得会啊，小辣椒一窍不通{:4_201:}

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

小辣椒 发表于 2022-5-14 13:42
太美了。逼真

嗯，还可以控制一下外观，方法有元素的形状、背景色、多重元素组合等等等等

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

小辣椒 发表于 2022-5-14 13:42
这个原理得会啊，小辣椒一窍不通

svg与HTML是表亲，它们可以合在一起使用。svg是xtml的东东，过去主要由机器生成，现在它和canvas一样进入到h5家族中来。
页: [1] 2
查看完整版本: 小辣椒来看看云