天女散珠

马黑黑

马黑黑

代码分享：

1. <style>
   
2. .bgBox {
   
3.         position: relative;
   
4.         display: flex;
   
5.         justify-content: center;
   
6.         align-items: center;
   
7.         width: 1280px;
   
8.         height: 768px;
   
9.         left: -342px;
   
10.         background: #000 url('https://638183.freep.cn/638183/t22/51/laomiao.jpg') no-repeat;
    
11.         overflow: hidden;
    
12.         perspective: 3000px;
    
13. }
    
14. .ball {
    
15.         position: absolute;
    
16.         width: 24px;
    
17.         height: 24px;
    
18.         border-radius: 50%;
    
19.         display: block;
    
20.         transform-style: preserve-3d;
    
21.         animation: fly var(--ss) linear infinite alternate;
    
22. }
    
23. 
    
24. .ball::before, .ball::after {
    
25.         position: absolute;
    
26.         content: '';
    
27.         width: 24px;
    
28.         height: 24px;
    
29.         border-radius: 50%;
    
30.         left: -10px;
    
31.         top: 5px;
    
32.         background: green;
    
33.         animation: fly calc(var(--ss) + 1s) linear infinite;
    
34. }
    
35. .ball::after {
    
36.         background: red;
    
37.         animation: fly calc(var(--ss) + 2s) linear infinite;
    
38. }
    
39. @keyframes fly {
    
40.         0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
    
41.         50% { opacity: .6; }
    
42.         100% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0; }
    
43. }
    
44. </style>
    
45. 
    
46. <div class="bgBox"></div>
    
47. 
    
48. <script>
    
49. let bgBox = document.querySelector('.bgBox');
    
50. let total = 200;
    
51. let sStr = '';
    
52. for(j=0; j<total; j++){
    
53.         let ww = getNum(20,30);
    
54.         let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
    
55.         let xx = getNum(-640,640);
    
56.         let yy = getNum(-384,384) ;
    
57.         sStr += `<span class='ball' style='--ss: ${getNum(4,10)}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${getNum(10,100)}px; width: ${ww}px; height: ${ww}px; ${bg}'></span>`;
    
58. }
    
59. bgBox.innerHTML += sStr;
    
60. let aud = document.createElement('iframe');
    
61. aud.src = 'https://music.163.com/outchain/player?type=2&id=1927765047&auto=1&height=66';
    
62. aud.style.display = 'none';
    
63. bgBox.appendChild(aud);
    
64. 
    
65. function setRgb(){ return `rgba(${getNum(0,255)},${getNum(0,255)}, ${getNum(0,255)})`; }
    
66. function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
    
67. 
    
68. </script>

复制代码

马黑黑

珠子多了：200*3=600

珠子改到极小，就是粒子效果的一种形态吧。

马黑黑

后续抛射原理：由于珠子多，在4~10（含4与10）中肯定存在好多珠子使用同一个关键帧运行周期时长的，故而后续还有抛射。

回落原理：animation语句中，使用了alternate，反向运行动画。

东篱闲人

你真能，人家都是天女散花，你是天女散球？你球多。。。

加林森

厉害厉害，又是黑洞原理，这个制作真漂亮。

红影

黑黑把这些珠子玩得出神入化，真漂亮的制作

红影

马黑黑 发表于 2022-5-17 07:24
代码分享：

还在想那--ss和--tx之类的都在哪里定义的，原来都在JS里呢，这个sStr的式子很巧妙

红影

马黑黑 发表于 2022-5-17 07:30
后续抛射原理：由于珠子多，在4~10（含4与10）中肯定存在好多珠子使用同一个关键帧运行周期时长的，故而后 ...

这样无穷的抛射和回落看着很玄幻

马黑黑

醉美水芙蓉 发表于 2022-5-17 11:32
漂亮！谢谢黑黑老师！辛苦了！

喜欢吧

马黑黑

东篱闲人 发表于 2022-5-17 08:11
你真能，人家都是天女散花，你是天女散球？你球多。。。

散花污染环境，改改

马黑黑

红影 发表于 2022-5-17 11:21
这样无穷的抛射和回落看着很玄幻

没个完结的时候也烦人

马黑黑

红影 发表于 2022-5-17 11:13
还在想那--ss和--tx之类的都在哪里定义的，原来都在JS里呢，这个sStr的式子很巧妙

--ss之类的是CSS变量赋值，它声明时是酱紫：var(--ss)

然后在CSS盒子中给出值：--ss: 10px;

也可以在 HTML中用 style 给CSS变量赋值：... style="--ss: 10px; ..." ....

JS就是利用 style 方法动态给CSS变量赋值的

马黑黑

红影 发表于 2022-5-17 11:11
黑黑把这些珠子玩得出神入化，真漂亮的制作

人家是大珠小珠落玉盘，俺这是小珠大珠随便玩

马黑黑

加林森 发表于 2022-5-17 09:16
厉害厉害，又是黑洞原理，这个制作真漂亮。

还行的吧

加林森

太漂亮了，我也去制作一个试试。

马黑黑

加林森 发表于 2022-5-17 12:44
太漂亮了，我也去制作一个试试。

O(∩_∩)O好的

加林森

马黑黑 发表于 2022-5-17 12:50
O(∩_∩)O好的

嗯嗯。

马黑黑

加林森 发表于 2022-5-17 12:52
嗯嗯。