加林森 发表于 2022-5-18 17:29

《奏律成光·未明》- 网易阴阳师手游（根据老黑代码制作的粒子）

本帖最后由 加林森 于 2022-5-18 19:07 编辑 <br /><br /><style>
.stage {
        left: -302px;
        width: 1200px;
        height:600px;
        background: #000 url('https://pic.imgdb.cn/item/6284d32009475431297650e8.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=1464077484&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 17:30

@马黑黑

梦油 发表于 2022-5-18 18:16

欣赏美乐、问候老林。

加林森 发表于 2022-5-18 18:22

梦油 发表于 2022-5-18 18:16
欣赏美乐、问候老林。

谢谢老梦！{:4_190:}

梦油 发表于 2022-5-18 18:31

加林森 发表于 2022-5-18 18:22
谢谢老梦！

不客气，不客气。

加林森 发表于 2022-5-18 18:48

梦油 发表于 2022-5-18 18:31
不客气，不客气。

好的好的。

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

新冠病毒吗？{:5_115:}

加林森 发表于 2022-5-18 19:47

你想得真多。。。。。

马黑黑 发表于 2022-5-18 20:20

音乐雄壮，帖子美美哒

加林森 发表于 2022-5-18 20:25

马黑黑 发表于 2022-5-18 20:20
音乐雄壮，帖子美美哒

谢谢老黑。{:4_190:}

马黑黑 发表于 2022-5-18 20:27

加林森 发表于 2022-5-18 20:25
谢谢老黑。

{:4_190:}

加林森 发表于 2022-5-18 20:29

马黑黑 发表于 2022-5-18 20:27


你请喝：{:4_191:}

大猫咪 发表于 2022-5-18 21:08

队长好制作，真漂亮！ 音乐特别给力，真好听！晚上好   {:4_204:}{:4_190:}{:4_179:}

加林森 发表于 2022-5-18 21:14

大猫咪 发表于 2022-5-18 21:08
队长好制作，真漂亮！ 音乐特别给力，真好听！晚上好

猫猫晚上好。这首音乐挺给力的。{:4_204:}{:4_190:}{:4_179:}

大猫咪 发表于 2022-5-18 21:32

加林森 发表于 2022-5-18 21:14
猫猫晚上好。这首音乐挺给力的。

嗯嗯   非常棒 {:4_179:}

加林森 发表于 2022-5-18 21:36

大猫咪 发表于 2022-5-18 21:32
嗯嗯   非常棒

是的。{:4_179:}

绿叶清舟 发表于 2022-5-18 21:52

队长这个制作真棒啊，很玄幻的感觉

加林森 发表于 2022-5-18 22:17

绿叶清舟 发表于 2022-5-18 21:52
队长这个制作真棒啊，很玄幻的感觉

都是跟老黑学的。

醉美水芙蓉 发表于 2022-5-19 07:06

红影 发表于 2022-5-19 08:55

这个选图漂亮，做得好。发现黑黑这个粒子效果用在哪都很漂亮呢。队长真棒{:4_187:}
页: [1] 2
查看完整版本: 《奏律成光·未明》- 网易阴阳师手游（根据老黑代码制作的粒子）