- UID
- 909
贵宾
- 主题
- 112
- 回帖
- 2316
- 精华
- 101
- 积分
- 4861
- 金币
- 7357 枚
- 鲜花
- 1487 朵
- 注册时间
- 2024-5-13
- 最后登录
- 2024-9-27
|
楼主 |
发表于 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>
复制代码
|
评分
-
6
查看全部评分
-
|