小辣椒 发表于 2022-5-18 13:04

明明喜欢你确不敢告诉你---学习黑黑的粒子效果


<style>
.stage {
        left: -390px;
                top:150px;
        width: 1386px;
        height:791px;
        background: #000 url('https://wj1.zp68.com:812/lxx/yunhua/2022/06/4IF.gif') 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://wj1.zp68.com:812/lxx/yunhua/2022/06/mmxhn.mp3';
au.style.display = 'none';
stage.appendChild(au);

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

</script>
<br><br><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-5-18 13:05

黑黑这个粒子配黑背景更加明显一点@马黑黑

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

小辣椒动作也太快了{:4_187:}

小辣椒 发表于 2022-5-18 13:09

马黑黑 发表于 2022-5-18 13:07
小辣椒动作也太快了

旧图是速度快的，黑黑你是千变万化的效果，真的佩服啊，今天是电脑上来的，所以马上就做了一个

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

小辣椒 发表于 2022-5-18 13:09
旧图是速度快的，黑黑你是千变万化的效果，真的佩服啊，今天是电脑上来的，所以马上就做了一个

挺漂亮了

小辣椒 发表于 2022-5-18 13:13

马黑黑 发表于 2022-5-18 13:10
挺漂亮了

那个孔雀舞我发现同一个文件夹不能同时出来2个，我套用你的你的出来，我的就不能显示了，换了文件夹就出来了，都不晓得有没有成功

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

师傅不用客气，告诉他。。。{:5_117:}

小辣椒 发表于 2022-5-18 13:14

马黑黑 发表于 2022-5-18 13:10
挺漂亮了

粒子效果可以点缀界面增加灵动感，我一直喜欢玩

小辣椒 发表于 2022-5-18 13:15

东篱闲人 发表于 2022-5-18 13:14
师傅不用客气，告诉他。。。

老头{:4_172:}
是喜欢你哦

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

小辣椒 发表于 2022-5-18 13:15
老头
是喜欢你哦

师傅不好撒谎的哦。。。{:5_117:}

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

小辣椒 发表于 2022-5-18 13:14
粒子效果可以点缀界面增加灵动感，我一直喜欢玩

挺好的

小辣椒 发表于 2022-5-18 13:17

东篱闲人 发表于 2022-5-18 13:17
师傅不好撒谎的哦。。。

没有啊{:4_170:}

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

小辣椒 发表于 2022-5-18 13:17
没有啊

嗯嗯，师傅尊老爱幼。。。。{:5_116:}

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

小辣椒 发表于 2022-5-18 13:13
那个孔雀舞我发现同一个文件夹不能同时出来2个，我套用你的你的出来，我的就不能显示了，换了文件夹就出 ...

这与文件夹没有关系，关键是 picAr 的赋值，你可以简单地给出完整地址的数组：

picAr = [
    '图片完整地址1',
    '图片完整地址2',
    '.....',
    '图片完整地址n'
];

然后，setBgImg() 函数的这句：

inner.style = `background: url('https://638183.freep.cn/638183/t22/51/${picAr}.jpg') no-repeat center/cover`;

改为：

inner.style = `background: url('${picAr}') no-repeat center/cover`;

小辣椒 发表于 2022-5-18 13:25

马黑黑 发表于 2022-5-18 13:21
这与文件夹没有关系，关键是 picAr 的赋值，你可以简单地给出完整地址的数组：

picAr = [


谢谢黑黑，学习了，我那个孔雀舞发了

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

小辣椒 发表于 2022-5-18 13:25
谢谢黑黑，学习了，我那个孔雀舞发了

看到了，挺不错的

小辣椒 发表于 2022-5-18 13:26

东篱闲人 发表于 2022-5-18 13:19
嗯嗯，师傅尊老爱幼。。。。

绝对的喜欢你{:4_172:}

红芍药 发表于 2022-5-18 13:28

辣椒好巧手。{:4_199:}{:4_199:}

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

小辣椒动作好快，制作得漂亮！{:4_199:}

大猫咪 发表于 2022-5-18 13:57

哈   真漂亮辣椒小动图融合的真棒！好听又好看   赞！
{:4_204:}{:4_199:}
页: [1] 2 3
查看完整版本: 明明喜欢你确不敢告诉你---学习黑黑的粒子效果