这个叶瓣效果也很美

马黑黑

马黑黑

代码

1. <style>
   
2. #wrap {
   
3.         margin: 20px auto;
   
4.         position: relative;
   
5.         width: 200px;
   
6.         height: 200px;
   
7.         animation: rot 6s linear infinite;
   
8. }
   
9. ye-zi {
   
10.         position: absolute;
    
11.         left: calc(50% - 0.5 * var(--ww));
    
12.         top: 0;
    
13.         width: var(--ww);
    
14.         height: 100px;
    
15.         border-radius: 0% 100%;
    
16.         background: linear-gradient(red, orange, green);
    
17.         transform-origin: 50% 100%;
    
18.         transform: rotate(var(--deg));
    
19. }
    
20. @keyframes rot { to { transform: rotate(360deg); } }
    
21. </style>
    
22. 
    
23. <div id="wrap"></div>
    
24. 
    
25. <script>
    
26. let all = 5;
    
27. Array.from({length: all}).forEach((item,key) => {
    
28.         item = document.createElement('ye-zi');
    
29.         item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
    
30.         wrap.appendChild(item);
    
31. });
    
32. </script>

复制代码

马黑黑

#wrap 和 yz-zi 的尺寸关系，应该能看得出来：yz-zi  的高度是 #wrap 的一半。

然后，第 29 行，--ww 变量是叶瓣的宽度，不同的宽度，外观会不一样，可以多加尝试。--deg 变量 不要去更改，它依据总数 all 自行按设定的算法计算，all 是可以改变的，一般建议 5 以上，也不要太多，多了就变成齿轮或圆了。

CSS中，叶瓣的颜色通过线性背景色设置，可以尝试变为不同的颜色组合。

红影

这个像花朵一样呢

小辣椒

红的花瓣了

小辣椒

黑黑精彩不断

马黑黑

小辣椒 发表于 2024-2-15 15:04
黑黑精彩不断

哪里哪里

小辣椒

马黑黑 发表于 2024-2-15 19:15
哪里哪里

这里这里

马黑黑

醉美水芙蓉 发表于 2024-2-15 20:08
欣赏黑黑老师新款播放器！

这个还没有做成播放控制器

马黑黑

小辣椒 发表于 2024-2-15 19:39
这里这里

樵歌

估计又要突发奇想，造个啥新奇的玩具给你徒弟们玩

马黑黑

樵歌 发表于 2024-2-16 09:09
估计又要突发奇想，造个啥新奇的玩具给你徒弟们玩

樵歌

马黑黑 发表于 2024-2-16 09:13

这个师尊不错

马黑黑

樵歌 发表于 2024-2-16 14:02
这个师尊不错

樵歌

马黑黑 发表于 2024-2-16 16:32

你徒弟都这样说

马黑黑

樵歌 发表于 2024-2-16 21:36
你徒弟都这样说

是不是啊？我有木有徒弟

红影

马黑黑 发表于 2024-2-15 13:38
#wrap 和 yz-zi 的尺寸关系，应该能看得出来：yz-zi  的高度是 #wrap 的一半。

然后，第 29 行，--ww 变 ...

“也不要太多，多了就变成齿轮或圆了。”
看到这个笑，现在知道齿轮怎么做了。如果想做的话

红影

感觉这的配色很漂亮，尤其橙色带圆环的感觉。

红影

“不同的宽度，外观会不一样，可以多加尝试。”

去试了一个，等这个楼层回完正好翻页，我把试验的发来