清明节
<br><br><style>
#papa { left: 14px; width: 650px; height: 800px; background: #ccc url('https://pic.imgdb.cn/item/642d0416a682492fccc66939.jpg') no-repeat center/cover; box-shadow: 1px 1px 1px #679e89; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; width: 50px; height: 50px; left: 460px; top: 670px; border-radius: 50%; background: conic-gradient(hsla(0,100%,50%,.7),hsla(120,100%,50%,.7),hsla(240,100%,50%,.7),hsla(300,100%,50%,.7)); mask: radial-gradient(transparent 3px,red 0); -webkit-mask: radial-gradient(transparent 3px,red 0); cursor: pointer; animation: rot 4s linear infinite; animation-play-state: paused; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 85px; font: bold 2.0em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0,100%,0%,.85)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(120,85%,40%,.75),hsla(120,70%,50%,.65)); 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%; } }
.cd { position: absolute; width: 550px; height: 700px; object-fit: cover; opacity: .5; clip-path: circle(100% at bottom) ;mix-blend-mode: screen;}
</style>
<div id="papa">
<video class="cd" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="lrc" data-lrc="HCplayer">HCplayer</div>
<div id="mplayer"></div>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/ea9f-audiofreehighqps/F5/A5/GKwRIRwIAsXQAEaQ6wILIcyj.m4a" autoplay= "autoplay"></audio>
<script>
let mKey = 0, mFlag = true;
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.loop = false;
mplayer.onclick = () => {
aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (mplayer.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
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>
手机手动播放点击小转盘 晚上好！ 清明时节，雨，纷纷路上行人，欲断魂。 好清新的贴子！宁静辛苦了{:10_402:} 宁静 发表于 2023-4-5 14:53
手机手动播放点击小转盘
今天清明节，出去玩没有
明时节雨纷纷， 路上行人欲断魂 借问酒家何处有 牧童遥指杏花村