小辣椒 发表于 2024-5-26 21:43

测试一下黑黑的 守护者代码


<style>
    #papa { margin: 120px 0 20px calc(50% - 593px); position: relative; width: 1066px; height: 572px; background: tan url(' '); box-shadow: 2px 2px 6px #000; user-select: none; z-index: 1; }
    .player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 8s linear infinite var(--state); }
    .player:nth-of-type(1) { left: 0px; top: 00px;}
    .player:nth-of-type(2) { left: 400px; top: 170px;}
    .player:nth-of-type(3) { left: 100px; top: 250px; --deg: 1turn; }
    .player:nth-of-type(4) { left: 925px; top: 250px; --deg: -1turn; }
    .player:nth-of-type(5) { left: 300px; top: 50px; --deg: 1turn; }
    .player:hover { filter: hue-rotate(60deg) drop-shadow(0 0 28px #000); --state: paused; }
    @keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="papa">
    <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/11/bu/04/00.mp3" autoplay loop></audio>
    <img class="player" src="https://wj1.zp68.com:812/lxx/yunhua/2023/11/bu/04/2.gif" alt="" />
    <img class="player" src="https://pic.imgdb.cn/item/66533ad2d9c307b7e95a27db.gif" alt="" />
    <img class="player" src="https://638183.freep.cn/638183/t23/btn/f3.png" alt="" />
    <img class="player" src="https://638183.freep.cn/638183/t23/btn/f4.png" alt="" />
    <img class="player" src="https://638183.freep.cn/638183/t23/btn/f5.png" alt="" />
</div>

<script>
    var players = document.querySelectorAll('.player');
    var mState = () => {
      papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      players.forEach(player => player.title = aud.paused ? '播放' : '暂停');
    };
    aud.onplaying = aud.onpause = () => mState();
    players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

小辣椒 发表于 2024-5-26 21:45

@马黑黑

5个按钮换动图都不能停止{:4_198:}只能音乐停止

现在背景和这个緑的小人儿是2个播放器按钮，三个是以前教程里面的，我就测试按钮可以不可以一键停止动图

南无月 发表于 2024-5-26 21:47

好酷的贴子。。{:4_199:}

马黑黑 发表于 2024-5-26 21:53

小辣椒 发表于 2024-5-26 21:45
@马黑黑

5个按钮换动图都不能停止只能音乐停止


Gif图片JS没法让它停下来

千羽 发表于 2024-5-26 21:59

好提神的音乐和画面，立马就 不困了{:4_173:}

千羽 发表于 2024-5-26 22:03

这两位不知疲倦的小人儿给画面带来了动感和生气美美哒{:4_187:}

小辣椒 发表于 2024-5-26 22:04

马黑黑 发表于 2024-5-26 21:53
Gif图片JS没法让它停下来

好可惜哦，小辣椒就喜欢玩动图

小辣椒 发表于 2024-5-26 22:04

千羽 发表于 2024-5-26 21:59
好提神的音乐和画面，立马就 不困了

啊~~~千羽还没有下啊

小辣椒 发表于 2024-5-26 22:05

南无月 发表于 2024-5-26 21:47
好酷的贴子。。

月月我测试一次动图的效果

千羽 发表于 2024-5-26 22:05

漂亮的花儿在优雅的旋转着，在黑色背景的映衬下，一切都是那么的美{:4_181:}

千羽 发表于 2024-5-26 22:06

小辣椒真是棒棒哒，佩服哦{:4_185:}

千羽 发表于 2024-5-26 22:07

小辣椒 发表于 2024-5-26 22:04
啊~~~千羽还没有下啊

刚才又来了{:4_173:}

小辣椒 发表于 2024-5-26 22:07

千羽 发表于 2024-5-26 22:05
漂亮的花儿在优雅的旋转着，在黑色背景的映衬下，一切都是那么的美

黑黑的5个播放器按钮，我就想换一下看看效果

小辣椒 发表于 2024-5-26 22:08

千羽 发表于 2024-5-26 22:06
小辣椒真是棒棒哒，佩服哦

这个是套用黑黑黑代码，不用佩服的{:4_173:}

千羽 发表于 2024-5-26 22:09

小辣椒 发表于 2024-5-26 22:07
黑黑的5个播放器按钮，我就想换一下看看效果

这效果很美的{:4_181:}

千羽 发表于 2024-5-26 22:10

小辣椒 发表于 2024-5-26 22:08
这个是套用黑黑黑代码，不用佩服的

佩服你俩哈{:4_173:}

梦油 发表于 2024-5-26 22:41

欢乐的情绪感染了我。

红影 发表于 2024-5-26 23:43

这个很活泼灵动，亲爱的制作真棒{:4_199:}

红影 发表于 2024-5-26 23:43

这个好像按背景就音乐停止了，不是按按钮才停止啊{:4_173:}

起个网名好难 发表于 2024-5-27 06:34

活力四射
页: [1] 2 3
查看完整版本: 测试一下黑黑的 守护者代码