粒子风

马黑黑

小辣椒

沙发我的

加林森

老黑好厉害，这个粒子真漂亮。

马黑黑

粒子所依托的元素，以走直线方式方式往左上行进，绕圈运行的是伪元素。元素加伪元素，每一个元素能生成三个粒子。

马黑黑

小辣椒 发表于 2022-5-18 12:53
沙发我的

小辣椒猪猪中午好

马黑黑

加林森 发表于 2022-5-18 12:54
老黑好厉害，这个粒子真漂亮。

粒子的运行有一定的随机性

小辣椒

马黑黑 发表于 2022-5-18 12:57
小辣椒猪猪中午好

黑黑。你这个粒子效果太美了

马黑黑

小辣椒 发表于 2022-5-18 12:59
黑黑。你这个粒子效果太美了

效果一般吧

加林森

马黑黑 发表于 2022-5-18 12:57
粒子的运行有一定的随机性

嗯嗯，看见了，有些在围着转，有些排着一起想上飘呢。

马黑黑

加林森 发表于 2022-5-18 13:02
嗯嗯，看见了，有些在围着转，有些排着一起想上飘呢。

中间还会有突然炸开的，这个符合粒子的运行规律

东篱闲人

这个真漂亮！

马黑黑

东篱闲人 发表于 2022-5-18 13:04
这个真漂亮！

感觉还过得去吧

加林森

马黑黑 发表于 2022-5-18 13:03
中间还会有突然炸开的，这个符合粒子的运行规律

是的，等你教程出来了我去研究。

马黑黑

加林森 发表于 2022-5-18 13:04
是的，等你教程出来了我去研究。

这个简单的，没啥教程，看看代码就好

加林森

马黑黑 发表于 2022-5-18 13:05
这个简单的，没啥教程，看看代码就好

嗯嗯。

东篱闲人

马黑黑 发表于 2022-5-18 13:04
感觉还过得去吧

还挺谦虚。。。

马黑黑

东篱闲人 发表于 2022-5-18 13:07
还挺谦虚。。。

谦虚这方面，俺还行

东篱闲人

马黑黑 发表于 2022-5-18 13:05
这个简单的，没啥教程，看看代码就好

哪有代码？

马黑黑

东篱闲人 发表于 2022-5-18 13:13
哪有代码？

完整代码：

1. <style>
   
2. .stage {
   
3.         left: -302px;
   
4.         width: 1200px;
   
5.         height:600px;
   
6.         background: #000 url('/data/attachment/forum/202205/18/124815o6t0rzts6v3acp3s.jpg') no-repeat;
   
7.         overflow: hidden;
   
8.         box-shadow: 2px 2px 8px rgba(0,0,0,.75);
   
9.         position: relative;
   
10. }
    
11. .particle {
    
12.         width: var(--ww);
    
13.         height: var(--ww);
    
14.         left: 50%;
    
15.         top: 70%;
    
16.         background: #eee;
    
17.         display: block;
    
18.         position: absolute;
    
19.         filter: blur(1px);
    
20.         animation: up var(--ss) linear infinite;
    
21. }
    
22. 
    
23. .particle::before, .particle::after {
    
24.         position: absolute;
    
25.         content: '';
    
26.         width: inherit;
    
27.         height: inherit;
    
28.         background: #eee;
    
29. }
    
30. 
    
31. .particle::before {
    
32.         top: -40px;
    
33.         animation: up calc(var(--ss) + 1s) 1.2s linear infinite;
    
34. }
    
35. .particle::after {
    
36.         top: -40px;
    
37.         animation: up calc(var(--ss) - 1s) .5s linear infinite;
    
38. }
    
39. 
    
40. @keyframes up {
    
41.         to { transform: translate(var(--hh),calc(var(--hh) / 1.5)) rotate(var(--deg)); }
    
42. }
    
43. 
    
44. </style>
    
45. 
    
46. <div class="stage">
    
47.         <div class="particle"></div>
    
48. </div>
    
49. 
    
50. <script>
    
51. 
    
52. let stage = document.querySelector('.stage');
    
53. let ww = 3;
    
54. let total = 100;
    
55. let pStr = '';
    
56. 
    
57. for(j=0; j< total; j++){
    
58.         let ss = getNum(5,20);
    
59.         let deg = getNum(15,720);
    
60.         let hh = -500;
    
61.         pStr += `<span class='particle' style='--ss: ${ss}s; --hh: ${hh}px; --deg: ${deg}deg; --ww: ${ww}px;)'></span>`;
    
62. }
    
63. stage.innerHTML = pStr;
    
64. 
    
65. let au = document.createElement('iframe');
    
66. au.src = 'https://music.163.com/outchain/player?type=2&id=1471588618&auto=1&height=66';
    
67. au.style.display = 'none';
    
68. stage.appendChild(au);
    
69. 
    
70. function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
    
71. 
    
72. </script>

复制代码

四海八荒

中子轰击核裂变？