论坛 › 音乐沙龙 › 复调音乐：结

马黑黑 发表于 2022-5-27 18:00

复调音乐：结

<style>
.mybg {
        left: -214px; display: flex; justify-content: center; align-items: center;
        width: 1024px; height: 600px; overflow: hidden;
        background: blue repeating-radial-gradient(circle, gray, transparent, black .05px);
        cursor: pointer; position: relative;
}
.mybg::before {
        content: ''; width: 200%; height: 200%;
        background: conic-gradient(transparent,rgba(0,200,255,.5),transparent 50deg);
        animation: rot 4s linear infinite; position: absolute;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

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

<script>
let bgbox = document.querySelector('.mybg'), aud = document.querySelector('#aud');

aud.addEventListener('timeupdate',function(){
        let pixel = aud.currentTime / 100;
        if(pixel <= 0) pixel = 0.05;
        bgbox.style.background = 'blue repeating-radial-gradient(circle, gray, transparent, black ' + pixel + 'px)';
});

bgbox.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
</script>

马黑黑 发表于 2022-5-27 18:00

原创代码：
<style>
.mybg {
        left: -214px; display: flex; justify-content: center; align-items: center;
        width: 1024px; height: 600px; overflow: hidden;
        background: blue repeating-radial-gradient(circle, gray, transparent, black .05px);
        cursor: pointer; position: relative;
}
.mybg::before {
        content: ''; width: 200%; height: 200%;
        background: conic-gradient(transparent,rgba(0,200,255,.5),transparent 50deg);
        animation: rot 4s linear infinite; position: absolute;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

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

<script>
let bgbox = document.querySelector('.mybg'), aud = document.querySelector('#aud');

aud.addEventListener('timeupdate',function(){
        let pixel = aud.currentTime / 100;
        if(pixel <= 0) pixel = 0.05;
        bgbox.style.background = 'blue repeating-radial-gradient(circle, gray, transparent, black ' + pixel + 'px)';
});

bgbox.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
</script>

红影 发表于 2022-5-27 20:12

这背景真神奇，变化无穷{:4_199:}

马黑黑 发表于 2022-5-27 20:13

红影 发表于 2022-5-27 20:12
这背景真神奇，变化无穷

背景是次要的，关键是音乐

红影 发表于 2022-5-27 20:16

不但自身变化着，拉动鼠标的时候还有闪光的错觉，厉害{:4_187:}

红影 发表于 2022-5-27 20:18

仅仅是.05px的变化就能有这样的效果，真想不到，还去利用音乐时长得到数值？更想不到{:4_173:}

马黑黑 发表于 2022-5-27 20:32

红影 发表于 2022-5-27 20:18
仅仅是.05px的变化就能有这样的效果，真想不到，还去利用音乐时长得到数值？更想不到

audio的进度已秒计，音乐开始时 是0秒，0还要除以100。所以有个条件语句，如果变量值低于等于0则等于0.05，否则背景会是一片黑。然后一直变化，径向渐变的变化参数最低时0.00xpx，最高时一般而言是五六个像素，背景就这样变化着。

醉美水芙蓉 发表于 2022-5-27 20:48

马黑黑 发表于 2022-5-27 21:43

醉美水芙蓉 发表于 2022-5-27 20:48
探照灯照亮整个世界！很美！

这个探照灯效果还是挺好的

加林森 发表于 2022-5-27 22:39

老黑真厉害&#128077;&#127995;明天来学习。{:4_199:}

绿叶清舟 发表于 2022-5-28 15:34

漂亮的效果

马黑黑 发表于 2022-5-28 15:57

绿叶清舟 发表于 2022-5-28 15:34
漂亮的效果

炫酷也会令人眩晕

绿叶清舟 发表于 2022-5-28 20:23

马黑黑 发表于 2022-5-28 15:57
炫酷也会令人眩晕

还会眼花了

马黑黑 发表于 2022-5-28 21:17

绿叶清舟 发表于 2022-5-28 20:23
还会眼花了

就是呀，所要要有点什么降噪

绿叶清舟 发表于 2022-5-28 21:26

马黑黑 发表于 2022-5-28 21:17
就是呀，所要要有点什么降噪

听上去很复杂的啊

马黑黑 发表于 2022-5-28 21:40

绿叶清舟 发表于 2022-5-28 21:26
听上去很复杂的啊

一般一般

小辣椒 发表于 2022-5-28 21:54

这里没有注意，黑黑这个有点像探照灯{:4_173:}

马黑黑 发表于 2022-5-28 22:03

小辣椒 发表于 2022-5-28 21:54
这里没有注意，黑黑这个有点像探照灯

元素里头有探照灯

红影 发表于 2022-5-28 22:28

马黑黑 发表于 2022-5-27 20:32
audio的进度已秒计，音乐开始时 是0秒，0还要除以100。所以有个条件语句，如果变量值低于等于0则等于0.05 ...

构思很巧妙，这个纯代码的帖子真好看{:4_187:}

红影 发表于 2022-5-28 22:29

马黑黑 发表于 2022-5-27 20:13
背景是次要的，关键是音乐

背景也很主要，背景漂亮，听音乐也赏心悦目{:4_204:}

查看完整版本: 复调音乐：结