本帖最后由 花简静 于 2024-9-10 19:54 编辑
<style>
#mydiv {
margin: 130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://642303.freep.cn/642303/tu/20240908%E7%8E%89%E5%BD%B188.webp') no-repeat center/cover;
box-shadow: 0 0 8px #0000008f;
position: relative;
overflow: hidden;
}
.player {
--size: 110px;
position: absolute;
width: var(--size);
height: var(--size);
cursor: pointer;
opacity: .36;
left: 305px;
top: 600px;
animation: rot 8s linear infinite var(--state);
}
.player > span {
position: absolute;
left: calc(var(--size) / 4);
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 4) calc(var(--size) / 4) calc(var(--size) / 4) 0;
border-color: transparent #c4bca5 #a43c27 transparent;
transform-origin: 100% 100%;
filter: drop-shadow(0 0 6px #00000080);
}
#vid {
position: absolute;
width: 100%;
height: 100%;
opacity: .99;
object-fit: cover;
mix-blend-mode: soft-light;
-webkit-mask: linear-gradient(to left top, red 5%, transparent 85%, transparent);
pointer-events: none;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2010000053" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/24/05/27/22/18/16/video665496280739e.mp4
" autoplay loop muted></video>
<div class="player"></div>
<div class="player"></div>
<div class="player"></div>
</div>
<script>
var players = mydiv.querySelectorAll('.player');
mState = () => {
mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
createPlayers = (elms) => {
elms.forEach(elm => {
Array(total = 5).fill(0).forEach((s,k) => {
s = document.createElement('span');
s.style.transform = `rotate(${360 / total * k}deg)`;
elm.appendChild(s);
});
});
};
createPlayers(players);
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
| 
