论坛 › 欢乐水吧 › 粒子风

马黑黑 发表于 2022-5-18 12:52

粒子风

<style>
.stage {
        left: -302px;
        width: 1200px;
        height:600px;
        background: #000 url('/data/attachment/forum/202205/18/124815o6t0rzts6v3acp3s.jpg') no-repeat;
        overflow: hidden;
        box-shadow: 2px 2px 8px rgba(0,0,0,.75);
        position: relative;
}
.particle {
        width: var(--ww);
        height: var(--ww);
        left: 50%;
        top: 70%;
        background: #eee;
        display: block;
        position: absolute;
        filter: blur(1px);
        animation: up var(--ss) linear infinite;
}

.particle::before, .particle::after {
        position: absolute;
        content: '';
        width: inherit;
        height: inherit;
        background: #eee;
}

.particle::before {
        top: -40px;
        animation: up calc(var(--ss) + 1s) 1.2s linear infinite;
}
.particle::after {
        top: -40px;
        animation: up calc(var(--ss) - 1s) .5s linear infinite;
}

@keyframes up {
        to { transform: translate(var(--hh),calc(var(--hh) / 1.5)) rotate(var(--deg)); }
}

</style>

<div class="stage">
        <div class="particle"></div>
</div>

<script>

let stage = document.querySelector('.stage');
let ww = 3;
let total = 100;
let pStr = '';

for(j=0; j< total; j++){
        let ss = getNum(5,20);
        let deg = getNum(15,720);
        let hh = -500;
        pStr += `<span class='particle' style='--ss: ${ss}s; --hh: ${hh}px; --deg: ${deg}deg; --ww: ${ww}px;)'></span>`;
}
stage.innerHTML = pStr;

let au = document.createElement('iframe');
au.src = 'https://music.163.com/outchain/player?type=2&id=1471588618&auto=1&height=66';
au.style.display = 'none';
stage.appendChild(au);

function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }

</script>

小辣椒 发表于 2022-5-18 12:53

沙发我的

加林森 发表于 2022-5-18 12:54

老黑好厉害，这个粒子真漂亮。{:4_199:}

马黑黑 发表于 2022-5-18 12:56

粒子所依托的元素，以走直线方式方式往左上行进，绕圈运行的是伪元素。元素加伪元素，每一个元素能生成三个粒子。

马黑黑 发表于 2022-5-18 12:57

小辣椒 发表于 2022-5-18 12:53
沙发我的

小辣椒猪猪中午好

马黑黑 发表于 2022-5-18 12:57

加林森 发表于 2022-5-18 12:54
老黑好厉害，这个粒子真漂亮。

粒子的运行有一定的随机性

小辣椒 发表于 2022-5-18 12:59

马黑黑 发表于 2022-5-18 12:57
小辣椒猪猪中午好

黑黑。你这个粒子效果太美了{:4_178:}

马黑黑 发表于 2022-5-18 12:59

小辣椒 发表于 2022-5-18 12:59
黑黑。你这个粒子效果太美了

效果一般吧

加林森 发表于 2022-5-18 13:02

马黑黑 发表于 2022-5-18 12:57
粒子的运行有一定的随机性

嗯嗯，看见了，有些在围着转，有些排着一起想上飘呢。

马黑黑 发表于 2022-5-18 13:03

加林森 发表于 2022-5-18 13:02
嗯嗯，看见了，有些在围着转，有些排着一起想上飘呢。

中间还会有突然炸开的，这个符合粒子的运行规律

东篱闲人 发表于 2022-5-18 13:04

这个真漂亮！{:4_187:}

马黑黑 发表于 2022-5-18 13:04

东篱闲人 发表于 2022-5-18 13:04
这个真漂亮！

感觉还过得去吧

加林森 发表于 2022-5-18 13:04

马黑黑 发表于 2022-5-18 13:03
中间还会有突然炸开的，这个符合粒子的运行规律

是的，等你教程出来了我去研究。

马黑黑 发表于 2022-5-18 13:05

加林森 发表于 2022-5-18 13:04
是的，等你教程出来了我去研究。

这个简单的，没啥教程，看看代码就好

加林森 发表于 2022-5-18 13:07

马黑黑 发表于 2022-5-18 13:05
这个简单的，没啥教程，看看代码就好

嗯嗯。

东篱闲人 发表于 2022-5-18 13:07

马黑黑 发表于 2022-5-18 13:04
感觉还过得去吧

还挺谦虚。。。{:5_116:}

马黑黑 发表于 2022-5-18 13:08

东篱闲人 发表于 2022-5-18 13:07
还挺谦虚。。。

谦虚这方面，俺还行

东篱闲人 发表于 2022-5-18 13:13

马黑黑 发表于 2022-5-18 13:05
这个简单的，没啥教程，看看代码就好

哪有代码？{:5_115:}

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

东篱闲人 发表于 2022-5-18 13:13
哪有代码？

完整代码：
<style>
.stage {
        left: -302px;
        width: 1200px;
        height:600px;
        background: #000 url('/data/attachment/forum/202205/18/124815o6t0rzts6v3acp3s.jpg') no-repeat;
        overflow: hidden;
        box-shadow: 2px 2px 8px rgba(0,0,0,.75);
        position: relative;
}
.particle {
        width: var(--ww);
        height: var(--ww);
        left: 50%;
        top: 70%;
        background: #eee;
        display: block;
        position: absolute;
        filter: blur(1px);
        animation: up var(--ss) linear infinite;
}

.particle::before, .particle::after {
        position: absolute;
        content: '';
        width: inherit;
        height: inherit;
        background: #eee;
}

.particle::before {
        top: -40px;
        animation: up calc(var(--ss) + 1s) 1.2s linear infinite;
}
.particle::after {
        top: -40px;
        animation: up calc(var(--ss) - 1s) .5s linear infinite;
}

@keyframes up {
        to { transform: translate(var(--hh),calc(var(--hh) / 1.5)) rotate(var(--deg)); }
}

</style>

<div class="stage">
        <div class="particle"></div>
</div>

<script>

let stage = document.querySelector('.stage');
let ww = 3;
let total = 100;
let pStr = '';

for(j=0; j< total; j++){
        let ss = getNum(5,20);
        let deg = getNum(15,720);
        let hh = -500;
        pStr += `<span class='particle' style='--ss: ${ss}s; --hh: ${hh}px; --deg: ${deg}deg; --ww: ${ww}px;)'></span>`;
}
stage.innerHTML = pStr;

let au = document.createElement('iframe');
au.src = 'https://music.163.com/outchain/player?type=2&id=1471588618&auto=1&height=66';
au.style.display = 'none';
stage.appendChild(au);

function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }

</script>

四海八荒 发表于 2022-5-18 13:24

中子轰击核裂变？

查看完整版本: 粒子风