套用黑黑老师代码帖：《蓝天下》 回致冬雨
本帖最后由 千羽 于 2022-11-9 19:50 编辑 <br /><br /><style>
#papa {
margin: 120px 0 0 calc(50% - 681px);
width: 1200px;
height: 629px;
background: gray url('https://pic1.imgdb.cn/item/636b77c716f2c2beb12cf770.jpg') no-repeat center/cover;
display: grid;
place-items: center;
box-shadow: 3px 3px 20px #000;
perspective: 1000px;
overflow: hidden;
user-select: none;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
bottom: 20px;
grid-template-columns: auto auto auto;
gap: 6px;
display: grid;
place-items: center;
color: hsl(0, 100%, 100%);
font: normal 16px sans-serif;
z-index: 999;
}
#btnplay {
--state: paused;
margin-right: -4px;
width: 30px;
height: 30px;
font: bold 30px/30px serif;
text-align: center;
cursor: pointer;
animation: rot 4s infinite linear;
animation-play-state: var(--state);
}
#prog {
width: 200px;
height: 20px;
opacity: .95;
cursor: pointer;
}
.stars {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: silver;
transform-style: preserve-3d;
}
@keyframes move { to { transform: rotate(0) translate3d(0, 0, 0); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="mplayer">
<span id="btnplay">✿</span>
<meter id="prog" low="30" high="90" max="100" optimum="100" value="1"></meter>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=19098246.mp3" loop autoplay></audio>
<script>
(function() {
(function() {
for(j=0; j<500; j++) {
let ele = document.createElement('span');
ele.className = 'stars';
ele.style.cssText += `
left: ${Math.random() * 400 + 450}px;
top: ${Math.random() * 80 + 100}px;
background: hsl(${Math.random() * 360}, ${Math.random() * 50 + 40}%,${Math.random() * 60 + 30}%);
box-shadow: 0 0 5px hsla(0,10%,100%,.25);
transform: rotate(${Math.random() * 360 + 360}deg) translate3d(${Math.random() * 400 + 100}px,${Math.random() * 300}px,${Math.random() * 900}px);
animation: move 100s infinite alternate ${-10 - Math.random() * 20}s linear;
`;
papa.appendChild(ele);
}
})();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => aud.play());
aud.addEventListener('timeupdate', () => {
prog.value = aud.currentTime / aud.duration * 100;
tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;
});
let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
})();
</script>
谢谢黑黑老师分享漂亮的高科技彩点代码{:4_187:} 蓝天下的这些小珠珠好美啊，羽儿的制作真棒，冬小雨快来收礼@冬天的雨{:4_187:} 厉害厉害，制作得真漂亮！赞！{:4_199:} 红影 发表于 2022-11-9 20:35
蓝天下的这些小珠珠好美啊，羽儿的制作真棒，冬小雨快来收礼@冬天的雨
问好影儿，{:4_179:} 千羽这个套用很完美，一步步来，后面就学习做歌词同步 加林森 发表于 2022-11-9 20:37
厉害厉害，制作得真漂亮！赞！
队长康复回来了，好好保养，祝队长永远健康快乐{:4_187:} 也是帮叫冬雨@冬天的雨
冬雨不激他躲着不出来{:4_170:} 小辣椒 发表于 2022-11-9 20:50
千羽这个套用很完美，一步步来，后面就学习做歌词同步
我是用以前的帖来做的，换一图和一歌，不用费时间和动脑子{:4_173:} 小辣椒 发表于 2022-11-9 20:51
也是帮叫冬雨@冬天的雨
冬雨不激他躲着不出来
哈哈，估计他很忙的，只要看到了就好{:4_181:} 千羽 发表于 2022-11-9 20:56
哈哈，估计他很忙的，只要看到了就好
不行，我也是去激他一下，就说千羽想你了{:4_170:} 千羽 发表于 2022-11-9 20:54
我是用以前的帖来做的，换一图和一歌，不用费时间和动脑子
聪明的，千羽就这样做很好的 小辣椒 发表于 2022-11-9 20:57
不行，我也是去激他一下，就说千羽想你了
小辣椒，可不能那么说啊{:4_181:} 小辣椒 发表于 2022-11-9 20:58
聪明的，千羽就这样做很好的
我只能做最简单的{:4_173:} 千羽 发表于 2022-11-9 21:00
我只能做最简单的
都一样的，那得一步步来 小辣椒 发表于 2022-11-9 21:02
都一样的，那得一步步来
我是懒且笨，复杂的学不会的{:4_173:} 千羽图图漂亮啊，油画的感觉 千羽 发表于 2022-11-9 20:51
队长康复回来了，好好保养，祝队长永远健康快乐
好的。我现在还不能做。 绿叶清舟 发表于 2022-11-9 21:12
千羽图图漂亮啊，油画的感觉
清舟来了，背景图是用以前的图做的，{:4_173:} 加林森 发表于 2022-11-9 21:20
好的。我现在还不能做。
嗯，等完全恢复后再玩，要保持天天好心情哦{:4_187:}