马黑黑 发表于 2022-5-25 21:18

石子

本帖最后由 马黑黑 于 2022-5-25 21:20 编辑 <br /><br /><style>
.wrap {
        width: 760px;
        height: 600px;
        background: lightblue;
        position: relative;
}
.drop {
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: rgba(255,255,255,.35);
        background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65));
        border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;
        box-shadow: inset 10px 10px 10px rgba(0,0,0,.05),
                15px 25px 10px rgba(0,0,0,.1),
                15px 20px 20px rgba(0,0,0,.05),
                inset -10px -10px 15px rgba(255,255,255,.9);
        display: block;
        backdrop-filter: blur(30px);
}

</style>

<div class="wrap"></div>

<script>

let wrap = document.querySelector('.wrap');
let str = '';
for(i = 0; i < 100; i++){
        str += `<span class="drop" style="width: ${numBtween(50,100)}px; height: ${numBtween(50,100)}px; left: ${numBtween(50,660)}px; top: ${numBtween(50,500)}px;"></span>`;
}
wrap.innerHTML += str;

function numBtween(min,max){ return Math.floor(Math.random() * (max-min+1)) + min; }

</script>

马黑黑 发表于 2022-5-25 21:28

<style>
.wrap {
        width: 760px;
        height: 600px;
        background: lightblue;
        position: relative;
}
.drop {
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: rgba(255,255,255,.35);
        background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65));
        border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;
        box-shadow: inset 10px 10px 10px rgba(0,0,0,.05),
                15px 25px 10px rgba(0,0,0,.1),
                15px 20px 20px rgba(0,0,0,.05),
                inset -10px -10px 15px rgba(255,255,255,.9);
        display: block;
        backdrop-filter: blur(30px);
}

</style>

<div class="wrap"></div>

<script>

let wrap = document.querySelector('.wrap');
let str = '';
for(i = 0; i < 100; i++){
        str += `<span class="drop" style="width: ${numBtween(50,100)}px; height: ${numBtween(50,100)}px; left: ${numBtween(50,660)}px; top: ${numBtween(50,500)}px;"></span>`;
}
wrap.innerHTML += str;

function numBtween(min,max){ return Math.floor(Math.random() * (max-min+1)) + min; }

</script>

马黑黑 发表于 2022-5-25 21:29

这一句会让系统资源有所负担，可以考虑删掉：

backdrop-filter: blur(30px);

第20行

醉美水芙蓉 发表于 2022-5-25 22:04

马黑黑 发表于 2022-5-25 22:15

醉美水芙蓉 发表于 2022-5-25 22:04
欣赏黑黑老师新作品！

{:4_190:}

红影 发表于 2022-5-25 22:19

这么多玉石啊，打劫了{:4_189:}

红影 发表于 2022-5-25 22:19

晶莹剔透的，真美{:4_199:}

红影 发表于 2022-5-25 22:19

马黑黑 发表于 2022-5-25 21:29
这一句会让系统资源有所负担，可以考虑删掉：

backdrop-filter: blur(30px);


删掉会影响效果的吧？

马黑黑 发表于 2022-5-25 22:20

红影 发表于 2022-5-25 22:19
删掉会影响效果的吧？

有一点点，透明度会略微加大

马黑黑 发表于 2022-5-25 22:21

红影 发表于 2022-5-25 22:19
这么多玉石啊，打劫了

随便拿去，打什么劫，犯罪的

马黑黑 发表于 2022-5-25 22:21

红影 发表于 2022-5-25 22:19
晶莹剔透的，真美

是啊，不染色的效果也挺好

红影 发表于 2022-5-26 19:09

马黑黑 发表于 2022-5-25 22:20
有一点点，透明度会略微加大

如果不是特别明显，去掉也无妨。

红影 发表于 2022-5-26 19:09

马黑黑 发表于 2022-5-25 22:21
随便拿去，打什么劫，犯罪的

抢来觉得更珍贵呀{:4_189:}

马黑黑 发表于 2022-5-26 19:11

红影 发表于 2022-5-26 19:09
如果不是特别明显，去掉也无妨。

嗯。backdrop-filter用于单个或几个元素不碍事，用于批量生产的元素是有些问题的。目前，backdrop-filter还处于实验室阶段，主要用于制作磨砂效果，就是那个啥，苹果系统的毛玻璃

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

红影 发表于 2022-5-26 19:09
抢来觉得更珍贵呀

知道了。那个啥诗句，生的娃个个是贼，偷得天桃敬母亲

红影 发表于 2022-5-26 19:19

马黑黑 发表于 2022-5-25 22:21
是啊，不染色的效果也挺好

效果非常棒，赏心悦目{:4_187:}

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

红影 发表于 2022-5-26 19:19
效果非常棒，赏心悦目

还行还行

红影 发表于 2022-5-26 20:33

马黑黑 发表于 2022-5-26 19:11
嗯。backdrop-filter用于单个或几个元素不碍事，用于批量生产的元素是有些问题的。目前，backdrop-filter ...

对这个语句不是很熟悉，黑黑知道得真多{:4_187:}

红影 发表于 2022-5-26 20:34

马黑黑 发表于 2022-5-26 19:13
知道了。那个啥诗句，生的娃个个是贼，偷得天桃敬母亲

没想那么远的事，只是觉得抢来的东西都是好的{:4_189:}

红影 发表于 2022-5-26 20:34

马黑黑 发表于 2022-5-26 19:25
还行还行

特别喜欢这个色彩，晶莹淡雅{:4_187:}
页: [1] 2
查看完整版本: 石子