黑洞
<style>.bgBox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 760px;
height: 600px;
background: radial-gradient(rgb(0,0,0),rgba(0,0,0,.85));
overflow: hidden;
perspective: 1000px;
}
.ball {
position: absolute;
border-radius: 50%;
display: block;
transform-style: preserve-3d;
animation: fly var(--ss) linear infinite;
}
@keyframes fly {
0% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0.1; }
20% { opacity: 1; }
100% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
}
</style>
<div class="bgBox"></div>
<script>
let total = 20; //小球总数
let sStr = '';
for(j=0; j<total; j++){
let ww = getNum(20,30); //小球宽高
let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`; //小球背景色
let xx = getNum(-600,600); //X坐标
if(xx < 100 && xx > -100) xx = 200; //离原点若低于正负100
let yy = getNum(-600,600); //Y坐标
if(yy < 100 && yy > -100) yy = -200;
let zz = getNum(10,100); //Z坐标
let ss = getNum(5,10); //动画周期
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>`;
}
document.querySelector('.bgBox').innerHTML += sStr;
function setRgb(){ return `rgba(${getNum(0,255)},${getNum(0,255)}, ${getNum(0,255)})`; }
function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
</script>
改进版的黑洞，和昨天在前院发的征名的帖子有所不同。代码如下：
<style>
.bgBox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 760px;
height: 600px;
background: radial-gradient(rgb(0,0,0),rgba(0,0,0,.85));
overflow: hidden;
perspective: 1000px;
}
.ball {
position: absolute;
border-radius: 50%;
display: block;
transform-style: preserve-3d;
animation: fly var(--ss) linear infinite;
}
@keyframes fly {
0% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0.1; }
20% { opacity: 1; }
100% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
}
</style>
<div class="bgBox"></div>
<script>
let total = 20; //小球总数
let sStr = '';
for(j=0; j<total; j++){
let ww = getNum(20,30); //小球宽高
let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`; //小球背景色
let xx = getNum(-600,600); //X坐标
if(xx < 100 && xx > -100) xx = 200; //离原点若低于正负100
let yy = getNum(-600,600); //Y坐标
if(yy < 100 && yy > -100) yy = -200;
let zz = getNum(10,100); //Z坐标
let ss = getNum(5,10); //动画周期
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>`;
}
document.querySelector('.bgBox').innerHTML += sStr;
function setRgb(){ return `rgba(${getNum(0,255)},${getNum(0,255)}, ${getNum(0,255)})`; }
function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
</script>
主要区别在于：
去掉动画延时，将延时的变量转给动画的周期时长。
其他细节区别非核心，也容易比较，不多说。 黑洞其实没有那么温和。真正的黑洞，会吞噬靠近它的一切，光也无法逃逸。
人若有机会经过黑洞，尚未靠近边缘就已经昏迷。然后，他在进入黑洞过程中会被强大的引力“加工”，慢慢变成一根牙签，然后就啥也没有了。人若有灵魂，在黑洞里，灵魂将不存在，就是彻底消失了——在黑洞，没有灵魂不灭的说法。 这个比前面那个大点，小球的颜色渐变更清晰了{:4_204:} 马黑黑 发表于 2022-5-16 07:42
黑洞其实没有那么温和。真正的黑洞，会吞噬靠近它的一切，光也无法逃逸。
人若有机会经过黑洞，尚未靠近 ...
“在黑洞，没有灵魂不灭的说法。”
貌似不在黑洞，灵魂就可以不灭一样。{:4_173:} 这里的黑洞也可以理解为黑黑带来的洞穴效应，简称黑洞{:4_173:} 红影 发表于 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
嗯嗯，不过小的感觉更像点。
各有各的像法
页:
[1]
2