<style>
#papa { margin: 20px 0 20px calc(50% - 931px); width: 1700px; height: 900px; top:130px;border-radius: 6px; background: #ccc url('https://pic.imgdb.cn/item/65b7b499871b83018ad675b1.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden;z-index: 1; }
.wrap { position: absolute; bottom: 0; left: calc(50% - 620px);top:330px; width: 196px; height: 420px; display: grid; place-items: center; }
.wrap::before { position: absolute; content: ''; width: 75%; height: 75%; border-radius: 10%; box-shadow: inset 0 0 60px rgba(50,10,200,.4); transition: .8s; }
.wrap:hover::before { box-shadow: inset 0 0 60px rgba(240,10,50,.6); }
#vid { position: absolute; width: 142px; height: 320px;top:52px; object-fit: cover; border-radius: 10%; aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen; }
#player { position: absolute; width: 360px; height: 420px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
li-zi { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #eee; opacity: 0; animation: moving var(--duration) var(--delay) linear infinite alternate var(--state); }
#vid1 { position: absolute; width: 2100px; height: 1000px; bottom:-100px;right:-150px;object-fit: cover; aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen;opacity: .56; transform: rotateY(180deg);}
@keyframes moving { from { transform: translate(var(--x0),var(--y0)); opacity: 0; } to { transform: translate(var(--x1),var(--y1)); opacity: .95; } }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=325975" autoplay loop></audio>
<div class="wrap">
<video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/45/5b43308f937a6.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停"></div>
</div>
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/65/5e5a0f84ebc6f.mp4" autoplay loop muted></video>
</div>
<script>
(function() {
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#player',
lrc_css: 'left: 50%; transform: translate(-50%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(0,191,255.65)); position: absolute; bottom: 20px; font: bold 1.8em sans-serif; color: #F0F8FF;',
});
};
let geci = [
[-0.65,"单曲：温暖",1.9],
[2.5,"歌手：姚晨",2.1],
[4.59,"所属专辑：温暖",2.2],
[6.8,"学习黑师《凡尘》梦幻水晶球播放效果",4.3],
[18.01,"在这漫长的路上有太多期待",7.3],
[26.07,"变幻不停的画面多少意外",7.9],
[35.06,"心中向往的地方有多遥远",7.8],
[44.06,"漫山遍野的春天何时到来",7.6],
[52.88,"",18.1],
[71.03,"幽蓝夜空多辽阔繁星点点",7.3],
[80.25,"花开云落流转璃有你陪伴",7.0],
[89.22,"分享所有的快乐还有忧伤",7.1],
[98.11,"装点我寂寞的世界不再黯淡",6.9],
[107.05,"多想这美好的歌声永远动听",6.9],
[115.81,"就在这柔软的月光里直到天明",6.9],
[124.75,"就让这美好的歌声永远动听",6.9],
[133.03,"就在这柔软的月光里直到天明",7.5],
[142.53,"就在这柔软的月光里直到天明",7.6]
];
let r = player.offsetWidth /2 - 18,
total = 100;
Array.from({length: total}).forEach((item,key) => {
let rad0 = (Math.PI / 180) * 360 / total * key,
rad1 = (Math.PI / 180) * (180 + (360 / total * key));
item = document.createElement('li-zi');
item.style.cssText += `
--x0: ${r + r * Math.cos(rad0)}px;
--y0: ${r + r * Math.sin(rad0)}px;
--x1: ${r + r * Math.cos(rad1)}px;
--y1: ${r + r * Math.sin(rad1)}px;
--duration: ${2 + Math.random() * 3}s;
--delay: -${Math.random() * 5}s;
background: url('https://img.soogif.com/eec7c8e4bca44deba45771d76e759ef0.gif') no-repeat center/cover;
`;
player.appendChild(item);
});
let mState = () => {
aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><br><br><br><br><br><br>
发表于 2024-1-30 11:23
发表于 2024-1-30 11:43
