一天到晚游泳的鱼（学习黑师古屋播放效果）
本帖最后由 雨中悄然 于 2023-3-8 18:21 编辑 <br /><br /><style>#papa {--state: paused;
margin: -80px 0 0 calc(50% - 593px);
display: grid;
place-items: center;
width: 1024px;
height: 640px;
background: lightblue url('https://pic.imgdb.cn/item/6406d22ff144a01007d8b608.gif') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
overflow:hidden;
user-select: none;
position: relative;
z-index: 1;
}
#btnFs {
position: absolute;
bottom: 20px;
right:20px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid green;
color: lightgreen;
text-shadow: 1px 1px 1px #000;
display: none;
cursor: pointer;
}
#mplayer {
position: absolute;
left: 36%;
top: 0;
width: 50px;
height: 50px;
background: hsla(120,100%,95%,.25);
border-radius: 50%;
box-shadow:
0 60px 20px 10px hsla(307,100%,50%,.80),
0 140px 20px 20px hsla(223,100%,60%,.80),
0 240px 20px 30px hsla(286,100%,70%,.80),
0 360px 20px 40px hsla(62,100%,80%,.80),
0 500px 20px 50px hsla(155,100%,90%,.80);
transform: rotate(-30deg);
animation: rot 3s ease-in-out infinite alternate var(--state);
cursor: pointer;
}
#mplayer::before {
position: absolute;
content: '';
left: -20px;
width: 100px;
height:580px;
}
#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)); z-index: 99;}
#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);z-index: 99; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-45deg); } }}
.pic { position: absolute; width: 664px; height: 116px; top: -80px; object-fit: cover; opacity: 1; }</style><div id="papa"><div id="lrc" data-lrc="花潮lrc在线"></div><div id="mplayer"><img class="pic" src="https://pic.imgdb.cn/item/6406ca6cf144a01007c6f491.png" alt="" /></div><div id="btnFs">全屏观赏</div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=5268928.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_187:} 极好的创意！32个赞。 马黑黑 发表于 2023-3-8 18:25
极好的创意！32个赞。
{:4_199:}收了 桥人把这串糖葫芦设置成了不同颜色，还加了图片，好棒的创意{:4_199:} 悄然脑袋灵的，这个制作太漂亮了。{:4_199:}
其实可以设定阴影和文字重叠的，也挺好玩{:4_173:} 红影 发表于 2023-3-8 19:22
悄然脑袋灵的，这个制作太漂亮了。
其实可以设定阴影和文字重叠的，也挺好玩
背英文单词也是杠杠的 海底世界，玩起来。 马黑黑 发表于 2023-3-8 19:43
背英文单词也是杠杠的
哦，你是说她把代码里的单词都背下来了啊。 红影 发表于 2023-3-8 22:55
哦，你是说她把代码里的单词都背下来了啊。
差不多 庶民 发表于 2023-3-8 20:04
海底世界，玩起来。
这个播放效果感觉放海底也比较自然，所以就试着整这个图 醉美水芙蓉 发表于 2023-3-8 19:47
朋友真会玩！好创意！
谢谢水芙蓉支持{:4_187:} 红影 发表于 2023-3-8 19:22
悄然脑袋灵的，这个制作太漂亮了。
其实可以设定阴影和文字重叠的，也挺好玩
本意是想让它摇到平成标题的，{:4_173:}好象差那么一点意思 红影 发表于 2023-3-8 19:19
桥人把这串糖葫芦设置成了不同颜色，还加了图片，好棒的创意
就是不断尝试中{:4_187:} 马黑黑 发表于 2023-3-8 19:43
背英文单词也是杠杠的
{:4_170:}学代码真是不容易啊 雨中悄然 发表于 2023-3-9 17:52
学代码真是不容易啊
高中英语还给体育老师了，初中英语还留有一点 雨中悄然 发表于 2023-3-9 17:51
本意是想让它摇到平成标题的，好象差那么一点意思
貌似角度里调一下就可以了呢{:4_173:} 雨中悄然 发表于 2023-3-9 17:52
就是不断尝试中
这个尝试特别棒，悄然厉害的{:4_199:}