这个起什么名字好？

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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）。