梦江南 发表于 2024-9-5 14:03

学习黑黑老师风车贴【美酒加咖啡】

本帖最后由 梦江南 于 2024-9-5 17:16 编辑 <br /><br /><style>
#mydiv {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 700px;
        background: url('https://pic.imgdb.cn/item/66d90eead9c307b7e9179c86.png') 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) / 5) calc(var(--size) / 5) calc(var(--size) / 5) 0;
        border-color: transparent Magenta steelblue transparent;
        transform-origin: 100% 100%;
        filter: drop-shadow(0 0 6px #00000080);
}
.player:nth-of-type(1) { right: 700px; top:180px; }
.player:nth-of-type(2) { left: 430px; bottom: 170px; }
.player:nth-of-type(3) { left: calc(50% - 80px); bottom: calc(50% - 80px); }
#vid {
        position: absolute;
        width: 70%;
        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=1985144766" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/02/12/5b519a8074c45.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 14:52

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

梦江南 发表于 2024-9-5 15:00

起个网名好难 发表于 2024-9-5 14:52


问好老师，谢谢首席分享。{:4_204:}

起个网名好难 发表于 2024-9-5 15:16

梦江南 发表于 2024-9-5 15:00
问好老师，谢谢首席分享。

这帖的特色在风车，如果能改变下它们的大小或位置就算是学到了东西。

茉莉 发表于 2024-9-5 16:08

华丽丽的画面，欣赏问好老师

梦江南 发表于 2024-9-5 16:20

起个网名好难 发表于 2024-9-5 15:16
这帖的特色在风车，如果能改变下它们的大小或位置就算是学到了东西。

风车位置改了，大小没改。看看如何？

梦江南 发表于 2024-9-5 16:21

茉莉 发表于 2024-9-5 16:08
华丽丽的画面，欣赏问好老师

谢谢老师分享，问好！{:4_204:}

梦油 发表于 2024-9-5 16:29

欣赏佳作，问候梦江南。

起个网名好难 发表于 2024-9-5 16:42

梦江南 发表于 2024-9-5 16:20
风车位置改了，大小没改。看看如何？

大小改更简单 --size 改下就行了

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

梦油 发表于 2024-9-5 16:29
欣赏佳作，问候梦江南。

问好梦油老师，谢谢分享。{:4_204:}

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

起个网名好难 发表于 2024-9-5 16:42
大小改更简单 --size 改下就行了

改小了1.这样看起来合适点了。

梦油 发表于 2024-9-5 17:24

梦江南 发表于 2024-9-5 17:18
问好梦油老师，谢谢分享。

梦江南朋友别客气。

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

梦油 发表于 2024-9-5 17:24
梦江南朋友别客气。

这是礼貌对吧。

起个网名好难 发表于 2024-9-5 17:36

梦江南 发表于 2024-9-5 17:20
改小了1.这样看起来合适点了。

通过修改体会更深刻。

醉美水芙蓉 发表于 2024-9-5 19:10

老谟深虑 发表于 2024-9-5 19:25

         欣赏老师的音画，制作的精美！

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

梦江南这个制作颜色太美了，歌曲也是好听{:4_199:}

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

这个作业等黑黑老师来批改，发现梦江南学习很认真哦{:4_199:}

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

欣赏精美作品，谢谢分享！

梦江南 发表于 2024-9-6 07:41

起个网名好难 发表于 2024-9-5 17:36
通过修改体会更深刻。

是的，老师说得没错，通过修改，对代码有了进一步认识。
早上好！{:4_204:}
页: [1] 2
查看完整版本: 学习黑黑老师风车贴【美酒加咖啡】