抛撒廉价珠子（box-shadow创意）

马黑黑

马黑黑

代码：（珠子原理请到后院查阅）

1. <style>
   
2. #papa {
   
3.         left: -214px;
   
4.         width: 1024px;
   
5.         height: 600px;
   
6.         box-shadow: 3px 3px 30px #000;
   
7.         overflow: hidden;
   
8.         position: relative;
   
9. }
   
10. 
    
11. #ball {
    
12.         position: absolute;
    
13.         left: 50%;
    
14.         bottom: -20px;
    
15.         width: 20px;
    
16.         height: 20px;
    
17.         border-radius: 50%;
    
18.         transition: box-shadow 5s ease;
    
19. }
    
20. </style>
    
21. 
    
22. <div id="papa">
    
23.         <div id="ball"></div>
    
24. </div>
    
25. 
    
26. <script>
    
27. let flag = 0;
    
28. let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
    
29. 
    
30. setInterval(() => {
    
31.         flag == 0 ? (ball.style.boxShadow = explode(num(50,200)), flag = 1) : (ball.style.boxShadow = 'none', flag = 0);
    
32. },5000);
    
33. 
    
34. function explode(total) {
    
35.         let str = '';
    
36.         Array.from({length: total}).forEach((ele) => {
    
37.                 str += `${num(-500,500)}px ${num(-600,-100)}px 0 rgb(${num(0,255)}, ${num(0,255)}, ${num(0,255)}),`;
    
38.         });
    
39.         str = str.substring(0,str.length - 1);
    
40.         return str;
    
41. }
    
42. </script>
    

复制代码

马黑黑

定时器设为5秒，每5秒运行一次 #ball 选择器的 box-shadow 设置，期间，抛撒和“收回”均独自运行，亦即，抛撒和收回用时10秒。

马黑黑

定时器对应于 #ball 的 transition 时间设定，这样一起一落看上去是衔接的

马黑黑

抛撒珠子的数量有一个区间，50-200，这意味着每一次抛撒的珠子数量是不相等的

马黑黑

珠子是阴影，不是实体元素，所以，即使布满整个帖子表层，也不会影响里面的其他元素的交互（但会遮挡）。

上海朝阳

马黑黑 发表于 2022-7-16 18:13
抛撒珠子的数量有一个区间，50-200，这意味着每一次抛撒的珠子数量是不相等的

哇塞，珠宝那么多呀

小辣椒

这个黑黑是可以当底图效果？

马黑黑

小辣椒 发表于 2022-7-16 21:17
这个黑黑是可以当底图效果？

我看可以

马黑黑

上海朝阳 发表于 2022-7-16 20:02
哇塞，珠宝那么多呀

假的

加林森

老黑真是有钱人，随便一撒就出来这么多圆珠子。厉害了。

马黑黑

加林森 发表于 2022-7-16 21:34
老黑真是有钱人，随便一撒就出来这么多圆珠子。厉害了。

这些都是一分钱不到的一粒

加林森

马黑黑 发表于 2022-7-16 21:35
这些都是一分钱不到的一粒

多来几下不就撒玩了。

马黑黑

加林森 发表于 2022-7-16 21:43
多来几下不就撒玩了。