石子

马黑黑

马黑黑

1. <style>
   
2. .wrap {
   
3.         width: 760px;
   
4.         height: 600px;
   
5.         background: lightblue;
   
6.         position: relative;
   
7. }
   
8. .drop {
   
9.         position: absolute;
   
10.         width: 150px;
    
11.         height: 150px;
    
12.         background-color: rgba(255,255,255,.35);
    
13.         background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65));
    
14.         border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;
    
15.         box-shadow: inset 10px 10px 10px rgba(0,0,0,.05),
    
16.                 15px 25px 10px rgba(0,0,0,.1),
    
17.                 15px 20px 20px rgba(0,0,0,.05),
    
18.                 inset -10px -10px 15px rgba(255,255,255,.9);
    
19.         display: block;
    
20.         backdrop-filter: blur(30px);
    
21. }
    
22. 
    
23. </style>
    
24. 
    
25. <div class="wrap"></div>
    
26. 
    
27. <script>
    
28. 
    
29. let wrap = document.querySelector('.wrap');
    
30. let str = '';
    
31. for(i = 0; i < 100; i++){
    
32.         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>`;
    
33. }
    
34. wrap.innerHTML += str;
    
35. 
    
36. function numBtween(min,max){ return Math.floor(Math.random() * (max-min+1)) + min; }
    
37. 
    
38. </script>

复制代码

马黑黑

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

backdrop-filter: blur(30px);

第20行

马黑黑

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

红影

这么多玉石啊，打劫了

红影

晶莹剔透的，真美

红影

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

backdrop-filter: blur(30px);

删掉会影响效果的吧？

马黑黑

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

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

马黑黑

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

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

马黑黑

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

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

红影

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

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

红影

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

抢来觉得更珍贵呀

马黑黑

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

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

马黑黑

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

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

红影

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

效果非常棒，赏心悦目

马黑黑

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

还行还行

红影

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

对这个语句不是很熟悉，黑黑知道得真多

红影

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

没想那么远的事，只是觉得抢来的东西都是好的

红影

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

特别喜欢这个色彩，晶莹淡雅