论坛 › 马黑黑教程专版 › 小广播

马黑黑 发表于 2023-2-11 09:00

小广播

<style>
#mplayer {
        --state: paused;
        position: relative;
        margin: 80px auto;
        width: 80px;
        height: 80px;
        background: darkgreen;
        box-shadow: inset 0 0 40px hsla(0,0%,100%,.75), -10px -10px 30px hsla(0,0%,0%,.75);
        border-radius: 50%;
        display: grid;
        place-items: center;
}
#mplayer:hover {
        cursor: pointer;
        box-shadow: inset 0 0 25px hsla(0,0%,100%,.75), -10px -10px 40px hsla(0,0%,0%,.75);
}
.wave {
        --delay: 0s;
        position: absolute;
        width: 80%;
        height: 80%;
        border: 3px solid snow;
        border-radius: 50%;
        clip-path: inset(25% 0 25% 25%);
        animation: fade .6s var(--delay) infinite var(--state);
}
.wave:nth-of-type(2) { --delay: .3s; width: 60%; height: 60%; }
.wave:nth-of-type(3) { --delay: .5s; width: 40%; height: 40%; }
.wave:nth-of-type(4) { --delay: .6s; width: 20%; height: 20%; }

@keyframes fade {
        from { opacity: .9; }
        to { opacity: 0.2; }
}
</style>

<div id="mplayer">
        <span class="wave"></span>
        <span class="wave"></span>
        <span class="wave"></span>
        <span class="wave"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1993911654.mp3" loop autoplay></audio>

<script>
(function() {
        let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        mplayer.addEventListener('click', () => {
                aud.paused ? aud.play() : aud.pause();
        });
})();
</script>

马黑黑 发表于 2023-2-11 09:01

代码
<style>
#mplayer {
        --state: paused;
        position: relative;
        margin: 80px auto;
        width: 80px;
        height: 80px;
        background: darkgreen;
        box-shadow: inset 0 0 40px hsla(0,0%,100%,.75), -10px -10px 30px hsla(0,0%,0%,.75);
        border-radius: 50%;
        display: grid;
        place-items: center;
}
#mplayer:hover {
        cursor: pointer;
        box-shadow: inset 0 0 25px hsla(0,0%,100%,.75), -10px -10px 40px hsla(0,0%,0%,.75);
}
.wave {
        --delay: 0s;
        position: absolute;
        width: 80%;
        height: 80%;
        border: 3px solid snow;
        border-radius: 50%;
        clip-path: inset(25% 0 25% 25%);
        animation: fade .6s var(--delay) infinite var(--state);
}
.wave:nth-of-type(2) { --delay: .3s; width: 60%; height: 60%; }
.wave:nth-of-type(3) { --delay: .5s; width: 40%; height: 40%; }
.wave:nth-of-type(4) { --delay: .6s; width: 20%; height: 20%; }

@keyframes fade {
        from { opacity: .9; }
        to { opacity: 0.2; }
}
</style>

<div id="mplayer">
        <span class="wave"></span>
        <span class="wave"></span>
        <span class="wave"></span>
        <span class="wave"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1993911654.mp3" loop autoplay></audio>

<script>
(function() {
        let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        mplayer.addEventListener('click', () => {
                aud.paused ? aud.play() : aud.pause();
        });
})();
</script>

小辣椒 发表于 2023-2-11 10:58

原来，播放器在这里 手机看见是半面的广播信号，帖子上看见是整个都有广播信号，是我手机的原因？

红影 发表于 2023-2-11 11:08

小喇叭开始广播了，有趣{:4_187:}

马黑黑 发表于 2023-2-11 11:15

小辣椒 发表于 2023-2-11 10:58
原来，播放器在这里 手机看见是半面的广播信号，帖子上看见是整个都有广播信号，是我手机的原因？

这里是半边波闪，帖子里才用两边波闪

马黑黑 发表于 2023-2-11 11:17

红影 发表于 2023-2-11 11:08
小喇叭开始广播了，有趣

你是听这个节目长大的吧？有好多文稿是我采集的，不过我和老郑合不来，后来就不干了

醉美水芙蓉 发表于 2023-2-11 11:49

马黑黑 发表于 2023-2-11 12:05

醉美水芙蓉 发表于 2023-2-11 11:49
欣赏老师佳作！

{:4_190:}

庶民 发表于 2023-2-11 12:48

净弄一些尖端的东东。

樵歌 发表于 2023-2-11 13:20

真会弄{:4_203:}

梦缘 发表于 2023-2-11 19:24

精彩的小喇叭，感谢分享！{:4_204:}

马黑黑 发表于 2023-2-11 19:27

梦缘 发表于 2023-2-11 19:24
精彩的小喇叭，感谢分享！

感谢支持

红影 发表于 2023-2-11 22:30

马黑黑 发表于 2023-2-11 11:17
你是听这个节目长大的吧？有好多文稿是我采集的，不过我和老郑合不来，后来就不干了

啊？黑黑连这个也弄过的啊，你咋啥都做过啊{:4_173:}

马黑黑 发表于 2023-2-11 22:58

红影 发表于 2023-2-11 22:30
啊？黑黑连这个也弄过的啊，你咋啥都做过啊

年纪大经历多

红影 发表于 2023-2-11 23:24

马黑黑 发表于 2023-2-11 22:58
年纪大经历多

很多人一生只从事一样工作，你做过的事倒是很丰富多彩啊{:4_187:}

马黑黑 发表于 2023-2-11 23:25

红影 发表于 2023-2-11 23:24
很多人一生只从事一样工作，你做过的事倒是很丰富多彩啊

因为什么都不专业所以什么都干过

红影 发表于 2023-2-12 13:49

马黑黑 发表于 2023-2-11 23:25
因为什么都不专业所以什么都干过

这话谦虚得过了，那些只干一样事的人是不懂变通，比如我这样的。分配到单位后都没换过单位{:4_173:}

马黑黑 发表于 2023-2-12 16:11

红影 发表于 2023-2-12 13:49
这话谦虚得过了，那些只干一样事的人是不懂变通，比如我这样的。分配到单位后都没换过单位

这叫执着，挺好

红影 发表于 2023-2-12 23:13

马黑黑 发表于 2023-2-12 16:11
这叫执着，挺好

没本事没胆量换，这也能被叫好，真有你的{:4_173:}

马黑黑 发表于 2023-2-12 23:16

红影 发表于 2023-2-12 23:13
没本事没胆量换，这也能被叫好，真有你的

好就是好，这个，将来你会慢慢领悟

查看完整版本: 小广播