那个人- 歌手：夜星晨
<style>#papa {margin: 150px 0 30px calc(50% - 798px); width: 1440px; height: 803px; position: relative; background: silver url('https://xlaj.cn/upfile/202411/14/bj.jpg') 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; left: 480px; bottom: 80px; text-align: center; color:AliceBlue; }
#mplayer p { margin: 0; padding: 0; cursor: pointer; }
#mprog { width: 280px; accent-color: GoldEnrod; outline: none; cursor: pointer; }
#btnplay { width: 75px; animation: rotating 6s infinite linear var(--state); }
#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(180deg,hsla(80,50%,20%,.20),hsla(80,50%,20%,.35)); position: absolute; left: 39%; bottom: 37px;font:normal 1.6em Microsoft YaHei; sans-serif; color:MintCream; 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); }
#vid { position: absolute; width: 472px; height: 362px; left: 55px;top:54px; object-fit: cover; aspect-ratio: 1; border-radius: 50%; cursor: pointer; mix-blend-mode: opacity: .9 }
.ipic { position: absolute; ; width: 100px; height: 100px;left: 820px;top:340px;mix-blend-mode: multiply; animation: rotating 6s infinite var(--state); }
.ipic1 { position: absolute; width: 100px; height: 100px;left: 540px;top:120px; 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="ipic1" alt="" src="https://xlaj.cn/upfile/202411/14/01.png" />
<img class="ipic" alt="" src="https://xlaj.cn/upfile/202411/14/02.png" />
<audio src="https://xlaj.cn/upfile/202411/14/ngr.mp3" autoplay loop></audio>
<video id="vid" src="https://china-img.soulapp.cn/video/2022-10-30/44d9a2b9-1ca1-49b7-83ed-2d6c69b44412.mp4" loop muted oncontextmenu="return false"></video>
<div id="mplayer">
<p><img id="btnplay" src="https://xlaj.cn/upfile/202411/14/2.png" 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="HuaChao">HuaChao </div>
</div>
<script>
const geci = [['0.00', '那个人- 夜星晨 ',4.85],
['5.11', '视频制作：小风 ',4.25],
['9.58', '记得第一眼见到你',3.86],
['14.70', '那时你笑得甜蜜',3.91],
['19.87', '辗转反侧难忘掉',3.80],
['24.92', '始终记得你笑意',3.92],
['30.10', '后来我们手牵手',3.75],
['35.10', '说过余生一起走',3.98],
['40.34', '可是老天不眷顾',3.84],
['45.44', '丢我一人在后头',3.91],
['50.61', '感情没有对与错',3.74],
['55.60', '没有想过会错过',3.92],
['60.78', '本来老天已注定',3.90],
['65.94', '此生你会遇到我',3.91],
['71.11', '我已用心去爱你',3.72],
['76.08', '可是还是要分离',3.99],
['81.33', '丢我一人在原地',3.85],
['86.43', '往事在美已回不去',4.65],
['92.38', '。。。。。。',18.80],
['112.17', '回忆曾经的美好',3.90],
['117.33', '心中还是忘不掉',3.87],
['122.46', '当初我们多恩爱',3.71],
['127.42', '最后你还是要逃',3.89],
['132.57', '曾经回忆忘不掉',3.98],
['137.81', '我还记得你的好',3.83],
['142.89', '可是再也回不去',3.90],
['148.05', '让我怎能来忘掉',5.07],
['153.44', '还盼望你能回来',3.60],
['158.28', '回来我们能相爱',3.81],
['163.34', '可是一切回不去',3.73],
['168.32', '一段故事一场意外',4.26],
['173.86', '可惜天空不作美',3.68],
['178.79', '我们没能配成对',3.89],
['183.94', '到头还是一场空',3.82],
['189.01', '最后还是终成灰',3.90],
['194.17', '到头还是一场空',3.87],
['199.30', '最后还是终成灰',4.12],
['209.69', '谢谢欣赏',4.17],
['224.29', '',4.5]
];
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> 很喜欢的一个播放器，黑黑二年前分享的，重新玩一次{:4_205:}
@马黑黑 以前做捣鼓半天的，现在感觉玩这个播放器很轻松了 小辣椒 发表于 2024-12-13 22:16
很喜欢的一个播放器，黑黑二年前分享的，重新玩一次
@马黑黑
这个看着清清爽爽。好制作 马黑黑 发表于 2024-12-13 22:24
这个看着清清爽爽。好制作
黑黑你以前分享的许多播放器都是非常经典的，玩一次太可惜了，这个播放器可以联动视频，歌词同步，还有2个图片 小辣椒 发表于 2024-12-13 22:28
黑黑你以前分享的许多播放器都是非常经典的，玩一次太可惜了，这个播放器可以联动视频，歌词同步，还有2 ...
{:4_208:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 很清爽的一幅音画帖，让人赏心悦目。{:4_187:} 小辣椒 发表于 2024-12-13 22:17
以前做捣鼓半天的，现在感觉玩这个播放器很轻松了
小辣椒这个背景视频定位做的好，视频周围有了立体感 这个播放器效果第一次看见{:4_197:}{:4_185:} 估计冬雨以前没有做过的 上来欣赏一下，顺便告诉小辣椒冬雨最近忙，没有时间玩，以后做帖了 这个视频太美了，整体画面也很漂亮，亲爱的帖子好美{:4_199:} 我都不记得这个效果了，亲爱的厉害，还能用来做这么漂亮的帖子{:4_199:} 欣赏欣赏 感谢佳作分享 马黑黑 发表于 2024-12-13 22:40
黑黑晚上好{:4_190:} 醉美水芙蓉 发表于 2024-12-13 23:46
非常漂亮！欣赏学习小辣椒精彩播放器！
问好水芙蓉，谢谢欣赏{:4_171:} 夕阳黄昏 发表于 2024-12-14 06:11
老顽童晚上好，谢谢欣赏{:4_187:}