本帖最后由 加林森 于 2022-5-18 13:58 编辑 <br /><br />马黑黑 发表于 2022-1-2 19:39
我才制作了一个出来，老黑你帮着着看看。谢谢！
<style>
.stage {
left: -214px;
width: 1024px;
height:575px;
background: #000 url('https://pic.imgdb.cn/item/628481af0947543129175d8f.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 = 'http://www.kumeiwp.com/sub/filestores/2022/05/18/1291f3f8f13846b1b802bacf8e1048e5.mp3';
au.style.display = 'none';
stage.appendChild(au);
function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
</script>
加林森 发表于 2022-1-2 20:40
我才制作了一个出来，老黑你帮着着看看。谢谢！
好的
马黑黑 发表于 2022-1-2 21:41
好的
嗯嗯