《蒙古骏马》 纯音乐 祝黑黑新年快乐！
本帖最后由 加林森 于 2022-1-1 18:51 编辑 <br /><br /><style type="text/css">.dDiv {
width:100%;
height:400px;
line-height:400px;
color:transparent;
font-family:SimHei,NSimSun,'Microsoft YaHei';
font-size:60px;
font-weight:bold;
background:#000;
text-align:center;
border-radius:8px 12px;
box-shadow:4px 4px 6px #000;
}
.sp { animation:iFlash 6s linear infinite; }
.dDiv span:nth-child(1) { animation-delay:0s; }
.dDiv span:nth-child(2) { animation-delay:0.4s; }
.dDiv span:nth-child(3) { animation-delay:0.8s; }
.dDiv span:nth-child(4) { animation-delay:1.2s; }
.dDiv span:nth-child(5) { animation-delay:1.6s; }
.dDiv span:nth-child(6) { animation-delay:2s; }
.dDiv span:nth-child(7) { animation-delay:2.4s; }
.dDiv span:nth-child(8) { animation-delay:2.8s; }
.dDiv span:nth-child(9) { animation-delay:3.2s; }
@keyframes iFlash {
0%,100% {
color:white;
text-shadow: 2px 2px 4px coral,
2px 2px 10px coral,
2px 2px 20px coral,
2px 2px 40px coral,
2px 2px 50px coral,
2px 2px 60px coral,
2px 2px 0px coral,
2px 2px 80px coral,
2px 2px 90px coral,
2px 2px 100px coral;
}
30%,90% {
color:transparent;
text-shadow:none;
}
}
</style>
<div class="dDiv">
<span class="sp">2</span>
<span class="sp">0</span>
<span class="sp">2</span>
<span class="sp">2</span>
<span class="sp">黑</span>
<span class="sp">黑</span>
<span class="sp">新</span>
<span class="sp">年</span>
<span class="sp">好</span>
</div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=0 height=0 src="//music.163.com/outchain/player?type=2&id=27971933&auto=1&height=66"></iframe>
本帖最后由 加林森 于 2022-5-18 20:53 编辑 <br /><br />跟着老黑学习，套用代码，真好用！谢谢老黑了！
<style>
.stage {
left: -302px;
width: 1200px;
height:600px;
background: #000 url('https://pic.imgdb.cn/item/6284bac30947543129587c6d.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>
感叹号好像跑到帖子下面来了。队长学会了，真棒{:4_187:} 太给力了 红影 发表于 2022-1-1 18:14
感叹号好像跑到帖子下面来了。队长学会了，真棒
谢谢红影！我干脆把感叹号给删了。{:4_204:} 马黑黑 发表于 2022-1-1 18:34
太给力了
老黑开心就好！{:4_190:} 加林森 发表于 2022-1-1 18:53
老黑开心就好！
我是乐呵呵的那类人 马黑黑 发表于 2022-1-1 19:00
我是乐呵呵的那类人
很好的人。喝酒没有？ 加林森 发表于 2022-1-1 19:01
很好的人。喝酒没有？
喝过了 马黑黑 发表于 2022-1-1 19:02
喝过了
那就好，现在可以放开了玩的了。 加林森 发表于 2022-1-1 19:04
那就好，现在可以放开了玩的了。
等下有事情要办 马黑黑 发表于 2022-1-1 19:21
等下有事情要办
好的 加林森 发表于 2022-1-1 18:53
谢谢红影！我干脆把感叹号给删了。
这个制作真漂亮{:4_204:} 红影 发表于 2022-1-1 19:33
这个制作真漂亮
跟老黑学习的啊！ 加林森 发表于 2022-1-1 19:55
跟老黑学习的啊！
知道，做得很成功{:4_187:} 加林森 发表于 2022-1-1 19:33
好的
嗯嗯 马黑黑 发表于 2022-1-1 20:45
嗯嗯
谢谢啊！ 红影 发表于 2022-1-1 20:37
知道，做得很成功
谢谢！ 马黑黑 发表于 2022-1-1 20:45
嗯嗯
开心啊 加林森 发表于 2022-1-1 20:53
开心啊
开开森森