帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 604px); width: 1046px; height: 588px; background: url('https://638183.freep.cn/638183/t24/webp/mic.webp') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; }
#g1 { position: absolute; left: calc(50% - 150px); bottom: 0; width: 300px; border-radius: 25% 100%; opacity : 0; transition: 3s; }
#papa:hover #g1 { opacity: 0.9; }
#g1:hover { width: 400px; }
#canv { position: absolute; left: calc(50% - 150px); cursor: pointer; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1927522898" autoplay loop></audio>
<img id="g1" src="https://638183.freep.cn/638183/t24/webp/mic1.webp" alt="" />
<canvas id="canv" width="300" height="200"></canvas>
</div>
<script>
(function() {
let ctx = canv.getContext('2d');
let ww = canv.width, hh = canv.height;
let ctrY = hh / 2, step = 0.25, total = 20, raf = null;
let mkRgba = (opacity=0.5) => {
let ar = [256,256,256].map((item) => Math.floor(Math.random() * item));
ar.push( opacity || (.5 + Math.random() * .5).toFixed(1));
return 'rgba(' + ar.join(',') + ')';
}
class curveLine {
constructor(x1, y1, cpx, cpy, x2, y2) {
this.x1 = x1;
this.y1 = y1;
this.cpx = cpx;
this.cpy = cpy;
this.x2 = x2;
this.y2 = y2;
this.color = 'green';
this.lineWidth = 4;
};
draw(ctx) {
ctx.save();
ctx.strokeStyle = this.color;
ctx.lineCap = 'round';
ctx.lineWidth = this.lineWidth;
ctx.beginPath();
ctx.moveTo(this.x1, this.y1);
ctx.quadraticCurveTo(this.cpx, this.cpy, this.x2, this.y2);
ctx.stroke();
ctx.closePath();
ctx.restore();
};
};
let draw = () => {
ctx.clearRect(0, 0, ww, hh);
let add = ww - 20;
for(let i = 0; i < total; i ++) {
let cl = new curveLine();
cl.x1 = ww / 2;
cl.y1 = hh - 5;
cl.cpx = (ww + add) / total * i - add / 2 + 5;
cl.cpy = ctrY;
cl.x2 = ww / 2;
cl.y2 = 5;
cl.color = mkRgba(0.7);
cl.lineWidth = 4;
cl.draw(ctx);
}
};
let render = () => {
ctrY += step;
if(ctrY > hh || ctrY < 0) step = -step;
draw();
raf = requestAnimationFrame(render);
};
canv.onclick = g1.onclick = () => {
cancelAnimationFrame(raf);
aud.paused ?
(aud.play(), requestAnimationFrame(render)) :
(aud.pause(), cancelAnimationFrame(raf));
};
render();
})();
</script>
| 
发表于 2024-4-14 20:45
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-4-14 20:52
老师这个是不是响应式频谱？好像是随音乐的节奏改变频率的。
发表于 2024-4-14 21:29
