本帖最后由 花简静 于 2024-6-2 19:13 编辑
<style>
#ma {margin: 30px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20240602w03.webp') no-repeat center/cover; box-shadow: 3px 3px 8px #000; overflow: hidden; z-index: 1; position: relative; }
.pa { position: absolute; padding: 20px; top: 60px; left: 40.5%;}
.pa::before, .pa::after { position: absolute; content: ''; width: 100%; height: 100%; transition: .7s; box-sizing: border-box;opacity: .87; }
.pa::before { left: 0; top: 0; content: url('https://642303.freep.cn/642303/za/8l.png'); }
.pa::after { right: 0; bottom: 0; content: url('https://642303.freep.cn/642303/za/8r.png');}
.pa:hover::before { left: -60px; transform: rotate(-8deg); opacity: .99; }
.pa:hover::after { right: -60px; transform: rotate(-8deg); opacity: .99; }
.player { position: relative;cursor: pointer; bottom:0px; left:20px;width: 280px; height: 280px; z-index: 2; opacity: .99; mix-blend-mode: screen;animation: rot 10s linear infinite var(--state); }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: color-dodge; }
.vid:nth-of-type(1) { position: absolute; left: 0px; top: 0px; object-fit: cover; mix-blend-mode: screen; filter: blur(8px) opacity(.20); transform: rotateX(180deg);}
.vid:nth-of-type(2) { width: 320px; height: 320px; right: 683px; top: 66px; border-radius: 50%; box-shadow: 0 0 16px snow; mix-blend-mode: unset; cursor: pointer; transition: .6s;filter: opacity(.89); }
.vid:nth-of-type(2):hover { transform: scale(1.0); }
@keyframes shake { to { inset: -20px; } }
.wave { position: absolute; left: 480px; top: 590px; mix-blend-mode: screen; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="ma">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2061739" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/33/5b570ae2b38f3.mp4" loop muted disablePictureinPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/90/5b4e1a583cb59.mp4" autoplay loop muted disablePictureinPicture></video>
<img class="pic" src="" alt="" />
<img class="wave" src="0" alt="" />
<div class="pa"><img id="player" class="player" alt="" src="https://642303.freep.cn/642303/za/QQ%E5%9B%BE%E7%89%8720240602143308.gif" /></div>
</div>
<script>
(function() {
const paNode = document.querySelector('.pa');
const paData = [];
paData.forEach((e,k) => {
let paClone = paNode.cloneNode(true);
let btn = paClone.querySelector('#player');
btn.id = 'player' + k;
btn.style.width = e[3] + 'px';
btn.onclick = () => player.click();
paClone.style.cssText += `left: ${e[0]}px; top: ${e[1]}px; filter: hue-rotate(${e[2]}deg);`;
ma.appendChild(paClone);
});
aud.onplaying = aud.onpause = () => {
let vids = document.querySelectorAll('.vid'), players = document.querySelectorAll('.player');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
ma.style.setProperty('--state', aud.paused ? 'paused' : 'running');
players.forEach(player => player.title = ['点击暂停','点击播放'][+aud.paused]);
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<script>
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: '#ma ',
lrcAr: geci,
btn: '.player',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 20px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(240,128,128,.65)); opacity: .5;font-size: 32px;color: #fff;',
});
};
let geci = [
[-1,"单曲：Immortal",6],
[7,"歌手：Thomas Bergersen",5],
[12,"所属专辑：Illusions",4],
[16,"作曲 : Thomas Bergersen",4],
[20,"学习黑师20240530《天策·天策府》开裂动画效果",6],
];
</script>
<Br><Br><Br><Br><Br><Br><Br>
| 
