strike

马黑黑 · 发表于 2024-1-24 20:36

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-1-25 09:34 编辑

马黑黑 · 发表于 2024-1-24 20:36

本帖最后由马黑黑于 2024-1-25 09:33 编辑

帖子代码

<style>
#papa {
position: relative;
margin: 0 0 0 calc(50% - 681px);
width: 1199px;
height: 622px;
border-radius: 8px;
background: radial-gradient(circle,transparent var(--radius), rgba(0,0,0,.5) calc(var(--radius) + 30%), rgba(0,0,0,.5) 0), url('https://638183.freep.cn/638183/t24/jpg/strike.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
cursor: pointer;
z-index: 1;
--radius: 0%;
}
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1418092894" autoplay loop></audio>
<script>
(function (){
var step = 10, rad = 0, raf = null;
var render = () => {
rad += step;
if(rad <= 0 || rad >= 100) step = -step;
papa.style.setProperty('--radius', rad + '%');
if(!aud.paused) raf = requestAnimationFrame(render);
};
var mState = () => aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
aud.addEventListener('pause', mState, false);
aud.addEventListener('playing', mState, false);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

复制代码

马黑黑 · 发表于 2024-1-24 20:41

实现原理

帖子主元素双背景：径向渐变 + 图片。

其中，径向渐变放前面，属顶层背景，可见；图片背景放在后面，被径向渐变背景覆盖。但由于径向渐变使用透明和部分透明色，图片会依稀可见，然后，CSS变量 --radius 借助 requestAnimationFrame 定时器在音乐播放时不断来回变化，营造出闪烁灯效果，图片背景随音乐以律动形态呈现。