|
|

楼主 |
发表于 2024-1-31 21:06
|
显示全部楼层
本帖最后由 马黑黑 于 2024-1-31 21:09 编辑
代码- <style>
- #papa {
- margin: auto;
- width: 600px;
- height: 630px;
- background: radial-gradient(circle, transparent, rgba(0,200,10,var(--opa))), url('https://638183.freep.cn/638183/t23/3/ts1.jpg') no-repeat center/cover;
- box-shadow: 3px 3px 8px gray;
- --opa: .6;
- }
- </style>
- <div id="papa"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=477964" autoplay loop></audio>
- <script>
- setInterval (function() { if(!aud.paused) papa.style.setProperty('--opa', Math.random()); },100);
- papa.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码 解释:
记忆 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com) 帖子,通过 audio 控件的 timeupdate 监听事件驱动背景闪烁效果,但如果使用了播放器插件,该监听事件不能再使用,所以需要一个替换方案,最简单的就是 setInterval 定时器,让它一直驱动背景闪烁,只要音频不是暂停中。
setInterval 定时器的时间频率可以调整,代码中的第 17 行,毫秒时间单位, 1000 表示1秒,例中使用 100。
|
|