未知频率

凡哥 · 发表于 2024-5-20 12:46

本帖最后由凡哥于 2024-5-20 17:58 编辑

凡哥 · 发表于 2024-5-20 12:47

代码

<style>
#papa { margin: 20px 0 20px calc(50% - 602px); width: 1024px; height: 640px; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; z-index: 1; display: grid; place-items: center; }
#papa::before { position: absolute; content: 'okey'; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t23/3/wvpl.jpeg') no-repeat center/cover; transition: 2s; }
#papa:hover::before { transform: scale(1.5);}
#canv, #player, #vid { position: absolute; }
#vid { bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; opacity: .9; mix-blend-mode: lighten; }
#player { cursor: pointer; animation: rot 8s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2141274880" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/99/5b4f03b48b1c3.mp4" autoplay loop muted></video>
<canvas id="canv" width="400" height="260"></canvas>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/windmill.png" alt="" title="播放/暂停" />
</div>
<script>
var ctx = canv.getContext('2d');
ctx.globalAlpha = .6;
var ww = canv.width, hh = canv.height;
var total = 16, step = 0.2, balls = [], raf = null;
class Ball {
constructor(data) {
this.ctx = ctx;
this.data = data;
};
draw() {
ctx.fillStyle = this.data.color;
ctx.beginPath();
ctx.arc(this.data.x, this.data.y, this.data.r, 0, Math.PI * 2);
ctx.fill();
};
};
var setData = (angle) => {
var cx = ww / 2, cy = hh / 2, r1 = ww / 2 - 25, r2 = hh / 2 - 25;
var x = cx + r1 * Math.cos(Math.PI / 180 * angle),
y = cy + r2 * Math.sin(Math.PI / 180 * angle);
var r = 5 + y / 25;
return { x: x, y: y, r: r };
};
var mkBalls = () => {
for(var i = 0; i < total; i ++) {
var a = i * 360 / total;
var d = Object.assign(setData(a), {angle: a, color: `#${Math.random().toString(16).substring(2,8)}`});
var ball = new Ball(d);
ball.draw();
balls.push(ball);
}
};
var render = () => {
ctx.clearRect(0, 0, ww, hh);
balls.forEach(b => {
b.data.angle = (b.data.angle + step) % 360;
b.data = Object.assign(b.data, setData(b.data.angle));
b.draw();
});
raf = requestAnimationFrame(render);
};
var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
mkBalls();
</script>