黑洞

马黑黑

马黑黑

改进版的黑洞，和昨天在前院发的征名的帖子有所不同。代码如下：

1. <style>
   
2. .bgBox {
   
3.         position: relative;
   
4.         display: flex;
   
5.         justify-content: center;
   
6.         align-items: center;
   
7.         width: 760px;
   
8.         height: 600px;
   
9.         background: radial-gradient(rgb(0,0,0),rgba(0,0,0,.85));
   
10.         overflow: hidden;
    
11.         perspective: 1000px;
    
12. }
    
13. .ball {
    
14.         position: absolute;
    
15.         border-radius: 50%;
    
16.         display: block;
    
17.         transform-style: preserve-3d;
    
18.         animation: fly var(--ss) linear infinite;
    
19. }
    
20. 
    
21. @keyframes fly {
    
22.         0% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0.1; }
    
23.         20% { opacity: 1; }
    
24.         100% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
    
25. }
    
26. </style>
    
27. 
    
28. <div class="bgBox"></div>
    
29. 
    
30. <script>
    
31. 
    
32. let total = 20; //小球总数
    
33. let sStr = '';
    
34. for(j=0; j<total; j++){
    
35.         let ww = getNum(20,30); //小球宽高
    
36.         let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`; //小球背景色
    
37.         let xx = getNum(-600,600); //X坐标
    
38.         if(xx < 100 && xx > -100) xx = 200; //离原点若低于正负100
    
39.         let yy = getNum(-600,600); //Y坐标
    
40.         if(yy < 100 && yy > -100) yy = -200;
    
41.         let zz = getNum(10,100); //Z坐标
    
42.         let ss = getNum(5,10); //动画周期
    
43.         sStr += `<span class='ball' style='--ss: ${ss}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${zz}px; width: ${ww}px; height: ${ww}px; ${bg}'></span>`;
    
44. }
    
45. document.querySelector('.bgBox').innerHTML += sStr;
    
46. 
    
47. function setRgb(){ return `rgba(${getNum(0,255)},${getNum(0,255)}, ${getNum(0,255)})`; }
    
48. function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
    
49. 
    
50. </script>

复制代码

马黑黑

主要区别在于：

去掉动画延时，将延时的变量转给动画的周期时长。

其他细节区别非核心，也容易比较，不多说。

马黑黑

黑洞其实没有那么温和。真正的黑洞，会吞噬靠近它的一切，光也无法逃逸。

人若有机会经过黑洞，尚未靠近边缘就已经昏迷。然后，他在进入黑洞过程中会被强大的引力“加工”，慢慢变成一根牙签，然后就啥也没有了。人若有灵魂，在黑洞里，灵魂将不存在，就是彻底消失了——在黑洞，没有灵魂不灭的说法。

红影

这个比前面那个大点，小球的颜色渐变更清晰了

红影

马黑黑 发表于 2022-5-16 07:42
黑洞其实没有那么温和。真正的黑洞，会吞噬靠近它的一切，光也无法逃逸。

人若有机会经过黑洞，尚未靠近 ...

“在黑洞，没有灵魂不灭的说法。”
貌似不在黑洞，灵魂就可以不灭一样。

红影

这里的黑洞也可以理解为黑黑带来的洞穴效应，简称黑洞

马黑黑

红影 发表于 2022-5-16 10:27
这里的黑洞也可以理解为黑黑带来的洞穴效应，简称黑洞

如此甚好

马黑黑

红影 发表于 2022-5-16 10:25
这个比前面那个大点，小球的颜色渐变更清晰了

可以调整大小的

马黑黑

红影 发表于 2022-5-16 10:25
“在黑洞，没有灵魂不灭的说法。”
貌似不在黑洞，灵魂就可以不灭一样。

如果认同灵魂存在的说法，那么，就得承认，灵魂是不死的

加林森

原来老黑研究有名称了。这个黑洞很形象。我原来研究过还洞的，知道它的威力很大，什么都可以吞噬的。

马黑黑

加林森 发表于 2022-5-16 12:25
原来老黑研究有名称了。这个黑洞很形象。我原来研究过还洞的，知道它的威力很大，什么都可以吞噬的。

除了黑洞，还有白洞

加林森

马黑黑 发表于 2022-5-16 12:41
除了黑洞，还有白洞

啊？白洞没有听说过。

马黑黑

加林森 发表于 2022-5-16 12:56
啊？白洞没有听说过。

有空查查资料

红影

马黑黑 发表于 2022-5-16 12:14
如此甚好

带着你的烙印的呢。

红影

马黑黑 发表于 2022-5-16 12:15
可以调整大小的

嗯嗯，不过小的感觉更像点。

红影

马黑黑 发表于 2022-5-16 12:16
如果认同灵魂存在的说法，那么，就得承认，灵魂是不死的

这个是没法验证的。

加林森

马黑黑 发表于 2022-5-16 13:09
有空查查资料

好的好的。

马黑黑

红影 发表于 2022-5-16 13:45
这个是没法验证的。

能认证就不叫你认同了

马黑黑

红影 发表于 2022-5-16 13:44
嗯嗯，不过小的感觉更像点。

各有各的像法