小辣椒 发表于 2024-9-5 21:17

陪你听风听雨


<style>
#mydiv {
        margin: 150px 0 30px calc(50% - 781px);
        width: 1400px;
        height: 711px;
        background: url(' https://xlaj.cn/assets/file/zp/20240905183624.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px #0000008f;
        position: relative;
}
.player {
        --size: 80px;
        position: absolute;
        width: var(--size);
        height: var(--size);
        cursor: pointer;
        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 lightblue steelblue transparent;
        transform-origin: 100% 100%;
        filter: drop-shadow(0 0 6px #00000080);
}
.player:nth-of-type(1) { right: 155px; top:235px; }
.player:nth-of-type(2) {width: 240px;
        height: 240px; left: 460px; bottom: 320px; }
.player:nth-of-type(3) { left: calc(10% - 50px); bottom: calc(10% - 30px); }
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: .35;
        object-fit: cover;
        mix-blend-mode: screen;
               -webkit-mask: radial-gradient(circle, transparent 160px, red 220px, red 0);       
        pointer-events: none;
}
@keyframes rot { to { transform: rotate(-1turn); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/ab/0f/fa/66637836cac372e04a36e6de05fc5074/audio.mp3" autoplay loop></audio>
        <video id="vid" src="https://txcdn-data.mvbox.cn/live/vp/38/66e2e727fea16961dd08020f53bbf087.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>

liumang 发表于 2024-9-5 23:40

小辣椒今天发二个帖，辛苦了{:5_150:}{:5_150:}

liumang 发表于 2024-9-5 23:41

{:5_145:}{:5_145:}{:5_145:}
页: [1]
查看完整版本: 陪你听风听雨