小小少年（学习黑师天外来物红影迷雾歌词效果）
本帖最后由 雨中悄然 于 2023-3-5 16:43 编辑 <br /><br /><style>#papa {--state: paused; --deg: 1turn;
margin: -90px 0 0 calc(60% - 649px);
display: grid;
place-items: center;
width: 1024px;
height: 640px;
background: lightblue url('https://pic.imgdb.cn/item/64044c9ef144a010075390fc.jpg') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
user-select: none;
position: relative;
z-index: 1;
}
#btnFs {
position: absolute;
left: 20px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid lightblue;
color: lightblue;
text-shadow: 1px 1px 1px #000;
display: none;
cursor: pointer;
}
#mplayer {
position: absolute;
left:100px
top:100px
background: yellow;
box-shadow: -10px -10px 30px blue inset;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
animation: rot linear 3s infinite var(--state);
position: relative;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
width: 40px;
height: 40px;
top: 50px;
box-shadow:
100px 100px 30px red,
-100px 100px 30px navy,
100px -100px 30px orange,
-100px -100px 30px olive;
animation: rot linear 3s infinite var(--state);
}
#mplayer::after { --deg: -2turn; top: -50px; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 300px; bottom: 30px; font: bold 2.4em sans-serif; color: hsl(20, 10%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(100, 90%, 50%, .45), hsla(80, 90%, 50%, .6), hsla(0, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="papa"><div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div><div id="mplayer"></div><div id="btnFs">全屏观赏</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1406051592.mp3" autoplay="" loop=""></audio></div>
<script>(function() {
let fs = false, timerId;
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('ended', () => playNext());
papa.addEventListener('mousemove', (e) => {
clearTimeout(timerId);
btnFs.style.display = 'block';
timerId = setTimeout('btnFs.style.display = "none"', 3000);
});
btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
})();</script> 沙发我的 悄然这个好有童趣的，我先去看看黑黑这个分享的教程{:4_189:} 欣赏老师佳作！{:4_204:} @马黑黑 @红影 交份作业 小辣椒 发表于 2023-3-5 16:43
沙发我的
{:4_187:}暖暖的沙发给小辣椒{:4_170:} 小辣椒 发表于 2023-3-5 16:44
悄然这个好有童趣的，我先去看看黑黑这个分享的教程
这个播放器色彩艳丽，童趣十足{:4_170:} 焱鑫磊 发表于 2023-3-5 16:44
欣赏老师佳作！
{:4_187:}感谢临帖支持哦 雨中悄然 发表于 2023-3-5 16:48
这个播放器色彩艳丽，童趣十足
{:4_181:} 100
√ 马黑黑 发表于 2023-3-5 16:50
你，我的自定义。。。哭{:4_195:} 马黑黑 发表于 2023-3-5 16:50
100
√
没扣分啊。。。。。 雨中悄然 发表于 2023-3-5 16:52
没扣分啊。。。。。
加了感情分{:4_170:} 马黑黑 发表于 2023-3-5 16:53
加了感情分
我的分隔线，再哭{:4_195:} 太美了，刚看了黑黑的分享，悄然速度太快了 雨中悄然 发表于 2023-3-5 16:53
我的分隔线，再哭
分隔线不乖了？ 发现做图图和音乐要和黑黑的播放器效果相配，悄然这点就做的很好{:4_199:} 小辣椒 发表于 2023-3-5 16:54
太美了，刚看了黑黑的分享，悄然速度太快了
{:4_187:}抄作业比较快 小辣椒 发表于 2023-3-5 16:55
发现做图图和音乐要和黑黑的播放器效果相配，悄然这点就做的很好
先整了一张图，找了歌后又改了跟词配的图 马黑黑 发表于 2023-3-5 16:54
分隔线不乖了？
{:4_181:}不知道咋了。站黑板都不知道哪去