论坛 › 欢乐水吧 › 陪你听风听雨 （学习套用黑黑 愿情播放器效果）

小辣椒 发表于 2024-9-5 20:15

陪你听风听雨 （学习套用黑黑 愿情播放器效果）

<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>

小辣椒 发表于 2024-9-5 20:16

@马黑黑

没有动脑子，直接套用了{:4_170:}

彩云归 发表于 2024-9-5 20:42

欣赏转圈的纸风车播放器，谢谢分享！

醉美水芙蓉 发表于 2024-9-5 20:49

小辣椒 发表于 2024-9-5 20:55

彩云归 发表于 2024-9-5 20:42
欣赏转圈的纸风车播放器，谢谢分享！

问好老师，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-9-5 20:55

醉美水芙蓉 发表于 2024-9-5 20:49
小辣椒最会玩了！中间播放器转圈圈真好玩！

问好水芙蓉，谢谢欣赏{:4_171:}

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

非常喜欢这帖颜色，风车转圈，赞！{:4_187:}

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

欢快的歌曲，灵动的图。好一个美字。

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

         欣赏小辣椒的佳作，真好！收藏了。

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

梦江南 发表于 2024-9-6 08:44
非常喜欢这帖颜色，风车转圈，赞！

谢谢梦江南欣赏，现在就玩旧图，这个是很早做的图了

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

梦油 发表于 2024-9-6 08:56
欢快的歌曲，灵动的图。好一个美字。

谢谢梦油，总是鼓励和支持，太感谢你了{:4_171:}

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

老谟深虑 发表于 2024-9-6 10:24
欣赏小辣椒的佳作，真好！收藏了。

问好老谟，小辣椒只是套用了黑黑老师的代码，改了一下播放器大小，然后加了中间播放器的活动范围，最简单的制作，老谟也是可以套用玩玩的

小九 发表于 2024-9-6 20:15

进来凉快一下{:4_187:}

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

小九 发表于 2024-9-6 20:15
进来凉快一下

哈哈，小九感觉凉快一点就好{:4_179:}、、

今年真的热疯了，居然没有一次台风

世外桃源 发表于 2024-9-7 10:30

欣赏美图

世外桃源 发表于 2024-9-7 10:30

歌儿好听，感谢分享

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

小辣椒 发表于 2024-9-6 20:13
谢谢梦油，总是鼓励和支持，太感谢你了

谢谢小辣椒朋友的鲜花。

樵歌 发表于 2024-9-7 19:28

黑白片的感觉，很有质感的。{:4_187:}

小辣椒 发表于 2024-9-7 19:59

樵歌 发表于 2024-9-7 19:28
黑白片的感觉，很有质感的。

樵哥哥回家了？

小辣椒 发表于 2024-9-7 19:59

梦油 发表于 2024-9-7 16:45
谢谢小辣椒朋友的鲜花。

不客气啊{:4_187:}

查看完整版本: 陪你听风听雨 （学习套用黑黑 愿情播放器效果）