马黑黑 发表于 2022-5-15 22:16

这个起什么名字好？

<style>

.bgBox {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 760px;
        height: 600px;
        background: #000;
        overflow: hidden;
        perspective: 2000px;
}
.ball {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: linear-gradient(#00cc50, #ffcc76);
        display: block;
        transform-style: preserve-3d;
        animation: fly 5s var(--ss) linear infinite;
}

@keyframes fly {
        0% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0; }
        60% { opacity: 1; }
        100% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
}

</style>

<div class="bgBox"></div>

<script>

let sStr = '';
for(j=0; j<60; j++){
        let ww = getNum(6,12);
        let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
        let xx = getNum(-600,600);
        if(xx < 50 && xx > -50) xx = 100;
        let yy = getNum(-600,600) ;
        if(yy < 50 && yy > -50) yy = -100;
        console.log (xx, yy);
        sStr += `<span class='ball' style='--ss: ${getNum(0,4)}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${getNum(10,100)}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>

马黑黑 发表于 2022-5-15 22:18

代码是酱紫：
<style>
.bgBox {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 760px;
        height: 600px;
        background: #000;
        overflow: hidden;
        perspective: 2000px;
}
.ball {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: block;
        transform-style: preserve-3d;
        animation: fly 5s var(--ss) linear infinite;
}

@keyframes fly {
        0% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0; }
        60% { opacity: 1; }
        100% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
}
</style>

<div class="bgBox"></div>

<script>

let sStr = '';
for(j=0; j<60; j++){
        let ww = getNum(6,12);
        let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
        let xx = getNum(-600,600);
        if(xx < 50 && xx > -50) xx = 100;
        let yy = getNum(-600,600) ;
        if(yy < 50 && yy > -50) yy = -100;
        console.log (xx, yy);
        sStr += `<span class='ball' style='--ss: ${getNum(0,4)}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${getNum(10,100)}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>

四海八荒 发表于 2022-5-15 22:32

宇宙星空退行？

马黑黑 发表于 2022-5-15 22:35

大概原理：

父盒子 .bgBox 的设定，令子元素全部居中。

父盒子使用弹性布局，并设定内元素对齐方式为横向与纵向方向都居中。父子元素均设为定位，前者 relative，后者 absolute，这才保证子元素两个方向都居中。

子元素盒子 .ball 位于父窗体的正中央，为了省事，也为了模拟所有星球都飞往“黑洞”，就让主界面的正中央为星球飞行的终点，那么，它们应该从中央以外的各处出发。所以，关键帧动画在 100% 时 translate3d 的参数都是 0，0 是子元素们的原始位置{xyz}坐标值，虽然它们在父窗体的正中央，但对它们来说它们的坐标值都是 0 。它们的出发点将是随机的，所以参数未具体设定，而是用了 var(--tx) 之类的变量声明方式来表达。

子元素，即星球，它们的出发位置由 JS 在创建元素时生成。JS代码不多做解释，知道修改几个关键数据就行，比如生成多少个星球（本例是60个）、星球随机大小范围（本例是6px至12px）、星球出发点的值设定再什么范围（本例是 -600 至 600）。


马黑黑 发表于 2022-5-15 22:36

四海八荒 发表于 2022-5-15 22:32
宇宙星空退行？

嗯，有点意思

加林森 发表于 2022-5-15 23:19

这个是绕着转的吧。

加林森 发表于 2022-5-15 23:21

好像还有点回归的感觉！

马黑黑 发表于 2022-5-15 23:56

加林森 发表于 2022-5-15 23:21
好像还有点回归的感觉！

嗯嗯，你说的有点意思

马黑黑 发表于 2022-5-15 23:57

加林森 发表于 2022-5-15 23:19
这个是绕着转的吧。

实际上是回到原点

红影 发表于 2022-5-16 09:56

黑黑又带来惊艳的效果，各个星球都奔赴原点，轰轰烈烈的感觉{:4_199:}

梦油 发表于 2022-5-16 10:07

看到黑黑朋友的设计制作，仿佛我也成了航天员。

红影 发表于 2022-5-16 10:09

叫万法归元如何？或者万象归宗{:4_173:}

红影 发表于 2022-5-16 10:10

跟神迹一样，这个比火星鱼更好{:4_173:}

加林森 发表于 2022-5-16 11:40

马黑黑 发表于 2022-5-15 23:56
嗯嗯，你说的有点意思

就叫回归吧

加林森 发表于 2022-5-16 11:41

马黑黑 发表于 2022-5-15 23:57
实际上是回到原点

嗯嗯

马黑黑 发表于 2022-5-16 12:14

加林森 发表于 2022-5-16 11:41
嗯嗯

{:4_190:}

马黑黑 发表于 2022-5-16 12:14

加林森 发表于 2022-5-16 11:40
就叫回归吧

也成

马黑黑 发表于 2022-5-16 12:16

红影 发表于 2022-5-16 10:09
叫万法归元如何？或者万象归宗

挺好的叫法

马黑黑 发表于 2022-5-16 12:17

红影 发表于 2022-5-16 09:56
黑黑又带来惊艳的效果，各个星球都奔赴原点，轰轰烈烈的感觉

视死如归？

马黑黑 发表于 2022-5-16 12:17

梦油 发表于 2022-5-16 10:07
看到黑黑朋友的设计制作，仿佛我也成了航天员。

挺好，航天员收入高
页: [1] 2 3 4
查看完整版本: 这个起什么名字好？