论坛 › 欢乐水吧 › 学习贴雨中百合《忘情忘你忘最初(DJ默涵版)》

醉美水芙蓉 发表于 2024-9-5 21:48

学习贴雨中百合《忘情忘你忘最初(DJ默涵版)》

<style>
#mydiv {
        margin: 150px 0 30px calc(50% - 781px);
        width: 1400px;
        height: 711px;
        background: url(' https://pic.imgdb.cn/item/66d99af8d9c307b7e9c9c09e.png') 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: 255px; top:435px; }
.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%;
        bottom:20px
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://cccimg.com/view.php/3023d5d0278984cbbb1261949b24de7c.mp3" autoplay loop></audio>
        <video id="vid" src="https://txcdn-data.mvbox.cn/live/vp/09/6b716739e8bec211c4970f948862ee34.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-6 07:46

{:4_174:}

梦江南 发表于 2024-9-6 08:35

欣赏老师佳作。

梦油 发表于 2024-9-6 08:56

欣赏佳作，问候芙蓉。

老谟深虑 发表于 2024-9-6 10:20

         欣赏老师佳作，点赞！

彩云归 发表于 2024-9-6 16:41

欣赏，问好！

小辣椒 发表于 2024-9-6 20:25

欣赏水芙蓉精彩的制作{:4_171:}

醉美水芙蓉 发表于 2024-9-6 21:21

马黑黑 发表于 2024-9-6 07:46


谢谢黑黑老师光临！

醉美水芙蓉 发表于 2024-9-6 21:21

梦江南 发表于 2024-9-6 08:35
欣赏老师佳作。

谢谢老师支持！

醉美水芙蓉 发表于 2024-9-6 21:22

梦油 发表于 2024-9-6 08:56
欣赏佳作，问候芙蓉。

谢谢梦油老师支持！

醉美水芙蓉 发表于 2024-9-6 21:22

老谟深虑 发表于 2024-9-6 10:20
欣赏老师佳作，点赞！

谢谢老师支持！

醉美水芙蓉 发表于 2024-9-6 21:22

彩云归 发表于 2024-9-6 16:41
欣赏，问好！

谢谢彩云归老师光临！

醉美水芙蓉 发表于 2024-9-6 21:23

小辣椒 发表于 2024-9-6 20:25
欣赏水芙蓉精彩的制作

谢谢小辣椒支持！

马黑黑 发表于 2024-9-6 23:02

醉美水芙蓉 发表于 2024-9-6 21:21
谢谢黑黑老师光临！

{:4_190:}

梦油 发表于 2024-9-7 16:48

醉美水芙蓉 发表于 2024-9-6 21:22
谢谢梦油老师支持！

芙蓉朋友别客气。

查看完整版本: 学习贴雨中百合《忘情忘你忘最初(DJ默涵版)》