Roc Wieler - Mendre

马黑黑

马黑黑

代码

1. <style>
   
2.         #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/w4/mendre.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
   
3.         #player { position: absolute; bottom: 100px; aspect-ratio: 1/1; width: 16%; transform-style: preserve-3d; cursor: pointer; border-radius: 50%; background: radial-gradient(lightgreen, transparent); }
   
4. .ring { position: absolute; width: 100%; height: 100%; border: 1px solid var(--cc); border-radius: 50%; transform: translateZ(-30px) rotateY(var(--ay)) rotateX(var(--ax)); }
   
5.         #btnFs { bottom: 20px; color: #eee; }
   
6.         .vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .8; pointer-events: none; }
   
7.         @keyframes rot { to { transform: rotate(1turn); } }
   
8. </style>
   
9. 
   
10. <div id="papa">
    
11.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1477945936" autoplay loop></audio>
    
12.         <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/24/12/36/49/video67e0e161531bc.mp4" autoplay loop muted></video>
    
13.         <div id="player"></div>
    
14. </div>
    
15. 
    
16. <script type="module">
    
17.         import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    
18.         FS(papa, player);
    
19. 
    
20.         var total = 20, rings = [], raf;
    
21.         Array.from({length: total}).forEach( (d,k) => {
    
22.                 d = document.createElement('div');
    
23.                 d.className = 'ring';
    
24.                 const a = k * 360 / total;
    
25.                 d.style.cssText += `
    
26.                         --ax: ${a}deg;
    
27.                         --ay:  ${a}deg;
    
28.                         --cc: #${Math.random().toString(16).substring(2,8)};
    
29.                 `;
    
30.                 rings.push({ elm: d, a: a });
    
31.                 player.appendChild(d);
    
32.         });
    
33. 
    
34.         const animate = () => {
    
35.                 cancelAnimationFrame(raf);
    
36.                 rings.forEach( (d, k) => {
    
37.                         d.a = (d.a + 1) % 360;
    
38.                         d.elm.style.setProperty('--ax', d.a + 'deg');
    
39.                         d.elm.style.setProperty('--ay', d.a + 'deg');
    
40.                 });
    
41.                 raf = requestAnimationFrame(animate);
    
42.         };
    
43. 
    
44.         aud.onplaying = aud.onpause = () => aud.paused ? cancelAnimationFrame(raf) : animate();
    
45. </script>

复制代码

花飞飞

进来就看到跟网站里不一样的制作，细的实线条也很漂亮～这个转动速度感觉更快一点～

花飞飞

我这会是来打个酱油的，攒了不少分来花一花～
忙去了哈

杨帆

漂亮！谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-7-19 17:25
漂亮！谢谢马老师精彩分享

马黑黑

花飞飞 发表于 2025-7-19 16:32
我这会是来打个酱油的，攒了不少分来花一花～
忙去了哈

马黑黑

花飞飞 发表于 2025-7-19 16:29
进来就看到跟网站里不一样的制作，细的实线条也很漂亮～这个转动速度感觉更快一点～

快慢看 animate 函数动画里角度加多少，这里加 1，加 ０.x 比较合适

朵拉

动感音乐，漂亮效果

朵拉

老师好，学生已交作业，请您指正

红影

这个线条的圆环小播很漂亮，转得很迷幻

红影

d = document.createElement('div');后面的都是介于这个产生的吧

马黑黑

朵拉 发表于 2025-7-19 20:19
动感音乐，漂亮效果

马黑黑

朵拉 发表于 2025-7-19 20:19
老师好，学生已交作业，请您指正

马黑黑

红影 发表于 2025-7-19 20:30
这个线条的圆环小播很漂亮，转得很迷幻

命名为魔幻球

马黑黑

红影 发表于 2025-7-19 20:32
d = document.createElement('div');后面的都是介于这个产生的吧

d 变量时 forEach 里的参数，它原本指向数组元素，这里借用该变量名转成要创建的 div 元素，d从此就是正在创建的 div，然后给它指定class，给它设置相应的CSS变量值（必要时还可以创建属性和属性值），最后添加到 player 容器。

红影

马黑黑 发表于 2025-7-19 20:38
命名为魔幻球

嗯嗯，很贴切

红影

马黑黑 发表于 2025-7-19 20:41
d 变量时 forEach 里的参数，它原本指向数组元素，这里借用该变量名转成要创建的 div 元素，d从此就是正 ...

添加好了， player 里想要的就有了。

马黑黑

红影 发表于 2025-7-19 22:15
添加好了， player 里想要的就有了。

创建多个元素，可以使用循环语句，常用的是 for 语句。比如要创建五个 div 元素，先声明一个变量，var total = 5，然后用 for 循环创建元素，并添加到 id="papa" 的容器元素中：

for (var k = 0; k < total; K++) {
    var div = document.createElement('div');
    div.className = 'ring';
    div.style.cssText += `
        width: 120px;
        height: 80px;
        left: ${K * 120 + 20}px;
`;
    div.innerText = k + 1;
    papa.appendChild(div);
}

for 语句里面，先创建循环流程，放在小括号里，(...) 里有三个部分：其一，var k = 0; k 是步进变量，从 0 开始，也可以从你愿意的数字开始，看情况而定；其二，限制 k 的范围，k < total; ，k 小于前面声明的总数值，这个式子也同样根据需要设置，比如小于等于或大于、大于等于，要设置得当，不然会死循环——就是永远达不到那个阈值，就在这里一直干下去跳不出来；其三，不仅方式，k ++，等价于 k = K +1，也可以自定义步进方式，例如 k = K + 2，或者，k --（等价于 K = k - 1），何种方式必须配套前面的设计，必须避免死循环的发生（例如，设计了 k 从10 开始、 K > 5，却使用 k ++ 做步进方式，酱紫，k的值永远大于5，就永远无法到达阈值，这个循环就跳不出来）。

然后是花括号 {...}，里面的内容是每一个循环过程要做的事情。上例，先使用JS内置的方法 document.createElement('元素名称') 的方法创建一个 div 元素并复制给自定义变量 div，就这给 div 指定CSS类名以便使用选择器 .ring { ... } 的相关设置，下来是额外设置一些CSS属性，使用的是JS内置属性设置方法 元素.style.cssText，下来则是给每一个元素指定文本 k+1，序号，最后将 div 追加给 papa 容器元素。

帖子创建圆环时用的是 forEach 循环，还有其它的方法。具体使用哪一种方法视各人习惯、语句的执行性能以及上下文环境等因素而定，并没有死规定。for循环执行速度可能是最好的，并且，它可以主动跳出或忽略一些情形，相对灵活。

马黑黑

红影 发表于 2025-7-19 22:13
嗯嗯，很贴切

还好