论坛 › 欢乐水吧 › 天女散珠

马黑黑 发表于 2022-5-17 07:22

天女散珠

<style>
.bgBox {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1280px;
        height: 768px;
        left: -342px;
        background: #000 url('https://638183.freep.cn/638183/t22/51/laomiao.jpg') no-repeat;
        overflow: hidden;
        perspective: 3000px;
}
.ball {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: block;
        transform-style: preserve-3d;
        animation: fly var(--ss) linear infinite alternate;
}

.ball::before, .ball::after {
        position: absolute;
        content: '';
        width: 24px;
        height: 24px;
        border-radius: 50%;
        left: -10px;
        top: 5px;
        background: green;
        animation: fly calc(var(--ss) + 1s) linear infinite;
}
.ball::after {
        background: red;
        animation: fly calc(var(--ss) + 2s) linear infinite;
}
@keyframes fly {
        0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
        50% { opacity: .6; }
        100% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0; }
}
</style>

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

<script>
let bgBox = document.querySelector('.bgBox');
let total = 200;
let sStr = '';
for(j=0; j<total; j++){
        let ww = getNum(20,30);
        let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
        let xx = getNum(-640,640);
        let yy = getNum(-384,384) ;
        sStr += `<span class='ball' style='--ss: ${getNum(4,10)}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${getNum(10,100)}px; width: ${ww}px; height: ${ww}px; ${bg}'></span>`;
}
bgBox.innerHTML += sStr;
let aud = document.createElement('iframe');
aud.src = 'https://music.163.com/outchain/player?type=2&id=1927765047&auto=1&height=66';
aud.style.display = 'none';
bgBox.appendChild(aud);

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-17 07:24

代码分享：<style>
.bgBox {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1280px;
        height: 768px;
        left: -342px;
        background: #000 url('https://638183.freep.cn/638183/t22/51/laomiao.jpg') no-repeat;
        overflow: hidden;
        perspective: 3000px;
}
.ball {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: block;
        transform-style: preserve-3d;
        animation: fly var(--ss) linear infinite alternate;
}

.ball::before, .ball::after {
        position: absolute;
        content: '';
        width: 24px;
        height: 24px;
        border-radius: 50%;
        left: -10px;
        top: 5px;
        background: green;
        animation: fly calc(var(--ss) + 1s) linear infinite;
}
.ball::after {
        background: red;
        animation: fly calc(var(--ss) + 2s) linear infinite;
}
@keyframes fly {
        0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
        50% { opacity: .6; }
        100% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0; }
}
</style>

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

<script>
let bgBox = document.querySelector('.bgBox');
let total = 200;
let sStr = '';
for(j=0; j<total; j++){
        let ww = getNum(20,30);
        let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
        let xx = getNum(-640,640);
        let yy = getNum(-384,384) ;
        sStr += `<span class='ball' style='--ss: ${getNum(4,10)}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${getNum(10,100)}px; width: ${ww}px; height: ${ww}px; ${bg}'></span>`;
}
bgBox.innerHTML += sStr;
let aud = document.createElement('iframe');
aud.src = 'https://music.163.com/outchain/player?type=2&id=1927765047&auto=1&height=66';
aud.style.display = 'none';
bgBox.appendChild(aud);

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-17 07:26

珠子多了：200*3=600

珠子改到极小，就是粒子效果的一种形态吧。

马黑黑 发表于 2022-5-17 07:30

后续抛射原理：由于珠子多，在4~10（含4与10）中肯定存在好多珠子使用同一个关键帧运行周期时长的，故而后续还有抛射。

回落原理：animation语句中，使用了alternate，反向运行动画。

东篱闲人 发表于 2022-5-17 08:11

你真能，人家都是天女散花，你是天女散球？你球多。。。{:5_116:}

加林森 发表于 2022-5-17 09:16

厉害厉害，又是黑洞原理，这个制作真漂亮。{:4_199:}

红影 发表于 2022-5-17 11:11

黑黑把这些珠子玩得出神入化，真漂亮的制作{:4_199:}

红影 发表于 2022-5-17 11:13

马黑黑 发表于 2022-5-17 07:24
代码分享：

还在想那--ss和--tx之类的都在哪里定义的，原来都在JS里呢，这个sStr的式子很巧妙{:4_204:}

红影 发表于 2022-5-17 11:21

马黑黑 发表于 2022-5-17 07:30
后续抛射原理：由于珠子多，在4~10（含4与10）中肯定存在好多珠子使用同一个关键帧运行周期时长的，故而后 ...

这样无穷的抛射和回落看着很玄幻{:4_199:}

醉美水芙蓉 发表于 2022-5-17 11:32

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

醉美水芙蓉 发表于 2022-5-17 11:32
漂亮！谢谢黑黑老师！辛苦了！

喜欢吧

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

东篱闲人 发表于 2022-5-17 08:11
你真能，人家都是天女散花，你是天女散球？你球多。。。

散花污染环境，改改

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

红影 发表于 2022-5-17 11:21
这样无穷的抛射和回落看着很玄幻

没个完结的时候也烦人{:4_189:}

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

红影 发表于 2022-5-17 11:13
还在想那--ss和--tx之类的都在哪里定义的，原来都在JS里呢，这个sStr的式子很巧妙

--ss之类的是CSS变量赋值，它声明时是酱紫：var(--ss)

然后在CSS盒子中给出值：--ss: 10px;

也可以在 HTML中用 style 给CSS变量赋值：... style="--ss: 10px; ..." ....

JS就是利用 style 方法动态给CSS变量赋值的

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

红影 发表于 2022-5-17 11:11
黑黑把这些珠子玩得出神入化，真漂亮的制作

人家是大珠小珠落玉盘，俺这是小珠大珠随便玩

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

加林森 发表于 2022-5-17 09:16
厉害厉害，又是黑洞原理，这个制作真漂亮。

还行的吧

加林森 发表于 2022-5-17 12:44

太漂亮了，我也去制作一个试试。

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

加林森 发表于 2022-5-17 12:44
太漂亮了，我也去制作一个试试。

O(∩_∩)O好的

加林森 发表于 2022-5-17 12:52

马黑黑 发表于 2022-5-17 12:50
O(∩_∩)O好的

嗯嗯。

马黑黑 发表于 2022-5-17 13:10

加林森 发表于 2022-5-17 12:52
嗯嗯。

{:4_180:}

查看完整版本: 天女散珠