《生日歌》祝福东篱大哥生日快乐（1.28）
<style>#papa { margin: 80px 0 0 calc(50% - 681px); width: 1200px; height: 674px; position: relative; box-shadow: 4px 4px 8px rgba(0,0,0,.6); overflow: hidden; display: grid; place-items: center; --state: paused; }
#mplayer { position: absolute; bottom: 10px; text-align: center; color: red; }
#mplayer p { margin: 0; padding: 0; cursor: pointer; }
#mprog { width: 240px; accent-color: Blue; outline: none; cursor: pointer; }
#btnplay { width: 80px; animation: rotating 6s infinite linear var(--state); }
#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(180deg,hsla(5,50%,50%,.95),hsla(5,100%,40%,.85)); position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(57, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
#vid1 { position: absolute; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1;pointer-events: none; mix-blend-mode: normal; }
#vid { position: absolute; top: 80px; width: 820px; height: 480px; object-fit: cover; border-radius: 50%; mix-blend-mode: normal; }
.ipic { position: absolute; top: 90px; mix-blend-mode: screen; animation: rotating 6s infinite var(--state); z-index: 1;}
.wenzi { position: absolute; right:10px; bottom: 20px; color: #FFFFBB; font: bold 16px/20px 'FangSong',serif; opacity: .45; }
@keyframes cover1 { from { width: 0%; }to { width: 100%; } }
@keyframes cover2 { from { width: 0%; }to { width: 100%; } }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<img class="ipic" alt="" src="https://pic.imgdb.cn/item/65b61466871b83018a950042.png" />
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/04/11/39309404bfcad9b724a2daf72ed9ef8b.mp3" autoplay loop></audio>
<video id="vid1" src="https://video-js.51miz.com/preview/video/00/00/14/18/V-141898-91FC9B79.mp4" autoplay loop muted oncontextmenu="return false"></video>
<video id="vid" src="https://img.tukuppt.com/video_show/00/12/20/64e30c3ee1fbc_10s_big.mp4" loop muted oncontextmenu="return false"></video>
<div class="wenzi">2024年1月28日 红影敬贺</div>
<div id="mplayer">
<p><img id="btnplay" src="https://pic.imgdb.cn/item/65b61466871b83018a950042.png" title="播放/暂停" alt="" /></p>
<output id="mdu">0:00</output>
<input id="mprog" type="range" min="0" step="1" max="100" value="0" title="调节进度" />
<output id="mcur">0:00</output>
</div>
<div id="lrc" data-lrc="HuaChao LRC Player">HuaChao LRC Player</div>
</div>
<script>
var geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/lrcku.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
sf.onload = () => {
var mseek = false;
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
if(!mseek) mprog.value = aud.currentTime / aud.duration * 100;
mcur.value = toMin(aud.currentTime);
mdu.value = toMin(aud.duration);
for (let j = 0; j < geci.length; j++) {
if (aud.currentTime >= geci) {
if (mKey === j) showLrc(geci);
else continue;
}
}
});
mprog.onchange = () => aud.currentTime = mprog.value * aud.duration / 100;
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onmousemove = () => {
if(mseek) mcur.value = toMin(mprog.value * aud.duration / 100);
};
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause()
var mState = () => aud.paused ? (stateSetting(,'--state','paused'), vid.pause(), vid1.pause()) : (stateSetting(,'--state','running'), vid.play(), vid1.play());
};
</script> 今天是东篱大哥生日正日子。祝福东篱大哥生日快乐，愿你的笑容如阳光般灿烂，生活如诗般美好！{:4_187:}
@东篱闲人 感谢黑黑的代码，{:4_187:}开始思路有问题，一直弄不出来，整天好半天{:4_173:} 漂亮的制作，美女很强大{:4_178:} 本帖最后由 菲儿 于 2024-1-28 17:49 编辑
影你太有才了，音画制作漂亮及了，{:4_199:}画面绚丽多彩，非常喜庆欢乐{:4_204:} 喜庆的贺帖，好看好听{:4_199:} 借美帖祝同祝生日快乐{:4_177:} 借影的美贴，祝福寿星东篱生日快乐！{:4_171:} 大气的制作，热闹的场面，同贺生日快乐！ 播放器按钮是旋转的小球，设计新颖，特别喜欢{:4_178:} 送礼收礼统统开心{:4_187:} 借红影朋友美帖，祝福东篱闲人朋友生日快乐、健康长寿！ 流水光阴 发表于 2024-1-28 17:45
漂亮的制作，美女很强大
谢谢流水光阴鼓励{:4_187:} 菲儿 发表于 2024-1-28 17:45
影你太有才了，音画制作漂亮及了，画面绚丽多彩，非常喜庆欢乐
谢谢菲儿，我们一起祝福东篱大哥生日{:4_187:} 世外桃源 发表于 2024-1-28 17:49
播放器按钮是旋转的小球，设计新颖，特别喜欢
谢谢桃源喜欢，跟桃源一起祝福东篱大哥{:4_187:} 梦油 发表于 2024-1-28 18:03
借红影朋友美帖，祝福东篱闲人朋友生日快乐、健康长寿！
跟梦油一起祝福东篱大哥{:4_187:} 红影 发表于 2024-1-28 17:14
今天是东篱大哥生日正日子。祝福东篱大哥生日快乐，愿你的笑容如阳光般灿烂，生活如诗般美好！
@ ...
欣赏亲爱的，精彩的生日贺帖，黑黑的新效果，漂亮{:4_199:} 老头生日快乐，祝越来越年轻啊@东篱闲人 小辣椒 发表于 2024-1-28 20:14
欣赏亲爱的，精彩的生日贺帖，黑黑的新效果，漂亮
亲爱的来了，身体好点么{:4_179:}