本帖最后由 凡哥 于 2024-7-13 10:20 编辑
2024年7月13日 星期六
<style>
#tiezi {
--width: 1300px;
margin: 30px 0 30px calc(50% - (var(--width) / 2 + 90px));
width: var(--width);
height: 720px;
background: radial-gradient(circle, rgba(244,187,68,.3), rgba(250,218,94,.3), rgba(243,229,171,.3)), black;
background-blend-mode: overlay normal;
box-shadow: 3px 3px 6px #111;
overflow: hidden;
z-index: 1;
position: relative;
}
.ma, .player, .vid { position: absolute; }
.ma { left: 60%; top: 15%; }
.player { cursor: pointer; animation: rot 8s linear infinite var(--state); }
.vid {
bottom: 0;
width: 100%;
height: calc(100% + 60px);
object-fit: cover;
mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2118177919" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/37/5d20843234224.mp4" autoplay loop muted></video>
<div id="ma" class="ma">
<img id="player" class="player" src="https://static.fotor.com.cn/assets/res/sticker/a6d2caa2-29fe-487d-965e-20d6512e13c2_thumb.png" alt="" />
</div>
</div>
<script>
(function() {
let ar = [[25,15,30,100], [45,70,150, 120]];
ar.forEach((e,k) => {
let clone = ma.cloneNode(true);
let btn = clone.querySelector('#player');
clone.id="ma" + k;
btn.id = 'player' + k;
btn.style.width = e[3] + 'px';
btn.onclick = () => player.click();
clone.style.cssText += `
left: ${e[0]}%;
top: ${e[1]}%;
filter: hue-rotate(${e[2]}deg);
`;
tiezi.appendChild(clone);
});
let mState = () => {
let players = document.querySelectorAll('.player'),
vids = document.querySelectorAll('.vid');
tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
players.forEach(player => player.title = ['暂停','播放'][+aud.paused]);
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
| 
发表于 2024-7-14 16:02
发表于 2024-7-14 17:37
