未知频率

马黑黑

马黑黑

环形旋转的粒子是本帖推出的重点，其思路是：

为了模拟3d，以 y 坐标作为依据令粒子小球的半径有所不同，y值越小小球的半径越小，反之越大，最小半径5，最大半径不会突破20（算法在第42行代码）。这实际上是模拟出了Z轴上的观察效果，当然是很粗糙的。

马黑黑

帖子代码

1. <style>
   
2.         #papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; z-index: 1; display: grid; place-items: center; }
   
3.         #papa::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t23/3/wvpl.jpeg') no-repeat center/cover; transition: 2s; }
   
4.         #papa:hover::before { transform: scale(1.5);}
   
5.         #canv, #player, #vid { position: absolute; }
   
6.         #vid { bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; opacity: .9; mix-blend-mode: lighten; }
   
7.         #player { cursor: pointer; animation: rot 8s linear infinite var(--state); }
   
8.         @keyframes rot { to { transform: rotate(360deg); } }
   
9. </style>
   
10. 
    
11. <div id="papa">
    
12.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2141274880" autoplay loop></audio>
    
13.         <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/99/5b4f03b48b1c3.mp4" autoplay loop muted></video>
    
14.         <canvas id="canv" width="400" height="260"></canvas>
    
15.         <img id="player" src="https://638183.freep.cn/638183/t23/btn/windmill.png" alt="" title="播放/暂停" />
    
16. </div>
    
17. 
    
18. <script>
    
19. 
    
20. var ctx = canv.getContext('2d');
    
21. ctx.globalAlpha = .6;
    
22. var ww = canv.width, hh = canv.height;
    
23. var total = 16, step = 0.2, balls = [], raf = null;
    
24. 
    
25. class Ball {
    
26.         constructor(data) {
    
27.                 this.ctx = ctx;
    
28.                 this.data = data;
    
29.         };
    
30.         draw() {
    
31.                 ctx.fillStyle = this.data.color;
    
32.                 ctx.beginPath();
    
33.                 ctx.arc(this.data.x, this.data.y, this.data.r, 0, Math.PI * 2);
    
34.                 ctx.fill();
    
35.         };
    
36. };
    
37. 
    
38. var setData = (angle) => {
    
39.         var cx = ww / 2, cy = hh / 2, r1 = ww / 2 - 25, r2 = hh / 2 - 25;
    
40.         var x = cx + r1 * Math.cos(Math.PI / 180 * angle),
    
41.                         y = cy + r2 * Math.sin(Math.PI / 180 * angle);
    
42.                 var r = 5 + y / 25;
    
43.         return { x: x, y: y, r: r };
    
44. };
    
45. 
    
46. var mkBalls = () => {
    
47.         for(var i = 0; i < total; i ++) {
    
48.                 var a = i * 360 / total;
    
49.                 var d = Object.assign(setData(a), {angle: a, color: `#${Math.random().toString(16).substring(2,8)}`});
    
50.                 var ball = new Ball(d);
    
51.                 ball.draw();
    
52.                 balls.push(ball);
    
53.         }
    
54. };
    
55. 
    
56. var render = () => {
    
57.         ctx.clearRect(0, 0, ww, hh);
    
58.         balls.forEach(b => {
    
59.                 b.data.angle = (b.data.angle + step) % 360;
    
60.                 b.data = Object.assign(b.data, setData(b.data.angle));
    
61.                 b.draw();
    
62.         });
    
63.         raf = requestAnimationFrame(render);
    
64. };
    
65. 
    
66. var mState = () => {
    
67.         papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
68.         aud.paused ? vid.pause() : vid.play();
    
69.         aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
    
70. };
    
71. 
    
72. aud.onplaying = aud.onpause = () => mState();
    
73. aud.onseeked = () => cancelAnimationFrame(raf);
    
74. 
    
75. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
76. 
    
77. mkBalls();
    
78. 
    
79. </script>

复制代码

朵拉

好漂亮的效果，有空学习下

南无月

这个贴子如梦似幻，色彩太漂亮了。乍一看跟昨天的钟摆结构有点相似。。细看完全不同。。

南无月

背景这样移进推出，那条竖线还在正中，这个设计是巧妙，转动的小球空间感和层次感很强，像是绕着那条线在转动，整体效果完美 。。

梦江南

独特的音画设计，加上这种节凑音效，棒极了！

红影

这样模拟立体感，厉害。这思路非常独特，利用y值的变化，设计球球半径，正好走到下方的y最大，上方的最小，倒真的像离得远的就小的道理一样呢

红影

播放器的转速和小球的一样，这个也需要设计的呢

红影

伪元素里的content: 'okey'; 比较少见，不知道是什么意思。

马黑黑

红影 发表于 2024-5-20 17:32
伪元素里的content: 'okey'; 比较少见，不知道是什么意思。

忘了删除了

马黑黑

朵拉 发表于 2024-5-20 12:17
好漂亮的效果，有空学习下

马黑黑

红影 发表于 2024-5-20 17:32
伪元素里的content: 'okey'; 比较少见，不知道是什么意思。

这是暗语，忘记了删除啦

马黑黑

红影 发表于 2024-5-20 17:27
播放器的转速和小球的一样，这个也需要设计的呢

这个末流设计师喝醉了酒才可以弄得出来

马黑黑

红影 发表于 2024-5-20 17:27
这样模拟立体感，厉害。这思路非常独特，利用y值的变化，设计球球半径，正好走到下方的y最大，上方的最小， ...

如果做Z轴，其实也是利用这个原理的

马黑黑

梦江南 发表于 2024-5-20 13:57
独特的音画设计，加上这种节凑音效，棒极了！

下午好

马黑黑

南无月 发表于 2024-5-20 12:55
背景这样移进推出，那条竖线还在正中，这个设计是巧妙，转动的小球空间感和层次感很强，像是绕着那条线在转 ...

图片设计竖线在最中央。然后呢，敲下黑板先，一下，二下，三下，这个这个，帖子容器元素使用如下CSS语句一约束子元素的位置：

display: grid;
place-items: center;

如果子元素不设置 left、top 或 translate(x,y) 之类的定位属性，则它们一直会保持绝对居中，不论大小、不论变大变小。

马黑黑

南无月 发表于 2024-5-20 12:54
这个贴子如梦似幻，色彩太漂亮了。乍一看跟昨天的钟摆结构有点相似。。细看完全不同。。

外观有点巧合而已，两者不相干

南无月

马黑黑 发表于 2024-5-20 17:52
图片设计竖线在最中央。然后呢，敲下黑板先，一下，二下，三下，这个这个，帖子容器元素使用如下CSS语句 ...

我今天加字的时候用常规方法完全不能控制带字的那个画布的位置，调得快晕了才有点像在轨道上。。

南无月

马黑黑 发表于 2024-5-20 17:52
图片设计竖线在最中央。然后呢，敲下黑板先，一下，二下，三下，这个这个，帖子容器元素使用如下CSS语句 ...

敲三下记住了，好记性不如烂笔头，我记个笔记去。