初始设计的《Elevate》小播

马黑黑

马黑黑

参考代码

1. 
   
2. <style>
   
3.     #ma {
   
4.         --size: 300px;
   
5.         position: relative;
   
6.         margin: 100px 0 100px calc(50% - var(--size) / 2);
   
7.         width: var(--size);
   
8.         height: var(--size);
   
9.         display: grid;
   
10.         place-items: center;
    
11.         animation: rot 8s linear infinite;
    
12.     }
    
13.     #ma::after {
    
14.         content: '';
    
15.         position: absolute;
    
16.         width: 16px;
    
17.         height: 16px;
    
18.         border-radius: 50%;
    
19.         background: pink;
    
20.     }
    
21.     .son {
    
22.         position: absolute;
    
23.         width: 100%;
    
24.         height: 1px;
    
25.         background: linear-gradient(to right, var(--bg1), var(--bg2));
    
26.         transform: rotate(var(--a));
    
27.         display: grid;
    
28.         place-items: center;
    
29.     }
    
30.     .son::before, .son::after {
    
31.         content: '';
    
32.         position: absolute;
    
33.         width: 24px;
    
34.         height: 24px;
    
35.         background: inherit;
    
36.         border-radius: 50%;
    
37.         left: 0;
    
38.     }
    
39.     .son::after {
    
40.         left: calc(100% - 24px);
    
41.     }
    
42.     @keyframes rot {
    
43.         to { transform: rotate(360deg); }
    
44.     }
    
45. </style>
    
46. 
    
47. <div id="ma"></div>
    
48. 
    
49. <script>
    
50.     const total = 7;
    
51.     Array.from({length: total}).forEach( (son, key) => {
    
52.         son = document.createElement('div');
    
53.         son.className = 'son';
    
54.         son.style.cssText += `
    
55.             --bg1: #${Math.random().toString(16).substring(2, 8)};
    
56.             --bg2: #${Math.random().toString(16).substring(2, 8)};
    
57.             --a: ${key * 180 / total}deg;
    
58.         `;
    
59.         ma.appendChild(son);
    
60.     });
    
61. </script>

复制代码

《Elevate》链接：Elevate - 动画音画 - 花潮论坛 - Powered by Discuz!

梦江南

问好黑黑老师，是什么原因，一点评分这图就不见了，得重新启动才会出来呢？

红影

原来这里有专门的讲解，我还在那个帖子里使劲看呢

杨帆

辛苦了！谢谢马老师经典讲授与精彩示范

马黑黑

梦江南 发表于 2025-7-31 14:41
问好黑黑老师，是什么原因，一点评分这图就不见了，得重新启动才会出来呢？

这是我的JS使用了较新的一些关键字，论坛程序在某些局部刷新机制中不予承认。这是正常现象，手动刷新一下就好

马黑黑

杨帆 发表于 2025-7-31 15:49
辛苦了！谢谢马老师经典讲授与精彩示范

马黑黑

红影 发表于 2025-7-31 15:40
原来这里有专门的讲解，我还在那个帖子里使劲看呢

这个应该是简单的，有点耐心的都可以设计出来

梦江南

马黑黑 发表于 2025-7-31 18:35
这是我的JS使用了较新的一些关键字，论坛程序在某些局部刷新机制中不予承认。这是正常现象，手动刷新一下 ...

谢谢老师回复。知道了。

马黑黑

梦江南 发表于 2025-7-31 18:43
谢谢老师回复。知道了。

红影

马黑黑 发表于 2025-7-31 18:36
这个应该是简单的，有点耐心的都可以设计出来

还是挺不容易的，黑黑厉害

马黑黑

红影 发表于 2025-7-31 22:51
还是挺不容易的，黑黑厉害

应该没啥吧？不必之前用svg实现的复杂

红影

马黑黑 发表于 2025-7-31 22:56
应该没啥吧？不必之前用svg实现的复杂

是的，这个原理还是挺简单的，做出来也不容易啊。

马黑黑

红影 发表于 2025-8-1 11:03
是的，这个原理还是挺简单的，做出来也不容易啊。

自己试试，完整做一次，开始会感觉有点难，写不出来就去参考一下人家的代码，自己继续写。久而久之，想要啥样纸，都能弄出来

红影

马黑黑 发表于 2025-8-1 12:25
自己试试，完整做一次，开始会感觉有点难，写不出来就去参考一下人家的代码，自己继续写。久而久之，想要 ...

这个真的还不行，都喜欢了跟在后面套着玩

马黑黑

红影 发表于 2025-8-1 18:55
这个真的还不行，都喜欢了跟在后面套着玩

这个要突破的

红影

马黑黑 发表于 2025-8-1 20:03
这个要突破的

习惯还是挺难改的

马黑黑

红影 发表于 2025-8-1 20:36
习惯还是挺难改的

慢慢来不急

红影

马黑黑 发表于 2025-8-1 22:57
慢慢来不急

急了也没用啊

马黑黑

红影 发表于 2025-8-2 21:13
急了也没用啊

没用就更不用急