<style>
#papa { margin: 0 0 0 calc(50% - 931px); width: 1700px; height: 900px; top:130px;position: relative; background: silver url('https://pic.imgdb.cn/item/65b4e5f1871b83018ad846a7.webp') no-repeat center/cover; box-shadow: 4px 4px 8px rgba(0,0,0,.6); overflow: hidden; display: grid; place-items: center; --state: paused; }
#mplayer { position: absolute; bottom: 45px; text-align: center; color: navy; }
#mplayer p { margin: 0; padding: 0; cursor: pointer; }
#mprog { width: 240px; accent-color: #336699; outline: none; cursor: pointer; }
#btnplay { width: 60px; animation: rotating 6s infinite linear var(--state); }
#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(rgba(250,250,250,.25),rgba(0,191,255.65)); position: absolute; bottom: 10px; font: bold 1.8em sans-serif; color: #F0F8FF; 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); opacity: .76}
#vid { position: absolute; left:52px;top:300px;width: 460px; height: 460px; object-fit: cover; aspect-ratio: 1; border-radius: 50%; cursor: pointer; mix-blend-mode: multiply; opacity: .56;}
.ipic { position: absolute; left:180px;top:460px;mix-blend-mode: multiply; animation: rotating 6s infinite var(--state); }
@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://638183.freep.cn/638183/small/dkxl.webp" />
<audio src="https://music.163.com/song/media/outer/url?id=1490104281" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/86/5b4bef165c71c.mp4" loop muted></video>
<div id="mplayer">
<p><img id="btnplay" src="https://638183.freep.cn/638183/small/dkxl.webp" title="播放/暂停" alt="" /></p>
<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>
</p>
</div>
<div id="lrc" data-lrc=" LRC Player"> LRC Player</div>
</div>
<script>
const geci = [
[0.55,"单曲：不散",0.9],
[1.42,"歌手：黄龄",1.3],
[2.67,"作词 : 申名利",1.2],
[3.91,"作曲 : 杨秉音",1.2],
[5.09,"飞绫绕风 如梦",5.5],
[10.86,"本无聚散",2.8],
[13.86,"学习黑师《雨巷》2024.1.27最新播放器效果",3.8],
[41.05,"殷红漫天 似真似幻",5.0],
[47.22,"银蝶 翩然 濯花瓣",5.1],
[53.08,"谁言无缺 日幽月暗",4.6],
[58.04,"偏爱在绝处参无间的恨与贪",2.6],
[60.62,"烈火隐去 野草复燃",9.1],
[70.81,"此消 彼长 再循环",4.9],
[76.73,"大千世界 卷轴璀璨",4.6],
[82.18,"亦邪亦正处 听谁叹",4.1],
[87.39,"何来聚散 又何来忘返",5.2],
[93.41,"何来魔障 又何来虚幻",5.2],
[99.05,"且看拂尘之下 桃源满山",6.2],
[105.69,"飘然而去 羽化成仙",4.2],
[111.04,"飞绫绕风 如梦",5.0],
[117.42,"本无聚散",1.8],
[125.23,"啊———啊———",4.7],
[129.92,"学习黑师《雨巷》2024.1.27最新播放器效果",21.2],
[151.11,"烈火隐去 野草复燃",4.6],
[156.78,"此消 彼长 再循环",4.7],
[162.08,"大千世界 卷轴璀璨",5.3],
[168.02,"亦邪亦正处 听谁叹",4.1],
[173.31,"何来聚散 又何来忘返",5.3],
[179.38,"何来魔障 又何来虚幻",5.1],
[185,"且看拂尘之下 桃源满山",6.1],
[191.09,"飘然而去 羽化成仙",5.5],
[197.07,"何来离散 又何来悲欢",6.0],
[203.1,"何来痴缠 又何来臆断",5.2],
[209.29,"纵是天命使然 无欲则善",5.5],
[215.38,"道生万物不散",4.2],
[221.02,"花树飘曳 云端",5.0],
[227.23,"本无消散",2.0]
];
const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/lrcku_range.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
vid.onclick = (e) => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br>
发表于 2024-1-28 18:40
发表于 2024-1-28 18:48
可以理解，我刚来还玩过一个几百楼的表情灌水贴。。哈哈。。
掌声
哈哈，学制图中，得到夸奖很开心滴。