醉美水芙蓉 发表于 2024-9-4 22:06

学习贴黑暗森林

<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 700px;
        background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8cbcfe8bca294747f5fda5427853d8ad_preview.webp') no-repeat center/cover;
        box-shadow: 0 0 8px #0000008f;
        position: relative;
}
.player {
        --size: 160px;
        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 lightGreen steelbluetransparent;
        transform-origin: 100% 100%;
        filter: drop-shadow(0 0 6px #00000080);
}
.player:nth-of-type(1) { right: 60px; top:20px; }
.player:nth-of-type(2) { left: 60px; bottom: 20px; }
.player:nth-of-type(3) { left: calc(50% - 80px); bottom: calc(50% - 80px); }
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: .95;
        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://music.163.com/song/media/outer/url?id=416892104" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/19/08/40/video63664438547aa.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>

起个网名好难 发表于 2024-9-5 06:18

https://cccimg.com/view.php/e0894c0da7b69368594ef711c9a07755.webp

醉美水芙蓉 发表于 2024-9-5 06:35

起个网名好难 发表于 2024-9-5 06:18


谢谢老师支持！

梦江南 发表于 2024-9-5 08:17

欣赏老师美帖。

醉美水芙蓉 发表于 2024-9-5 11:33

梦江南 发表于 2024-9-5 08:17
欣赏老师美帖。

谢谢老师支持！
页: [1]
查看完整版本: 学习贴黑暗森林