未命名

马黑黑

马黑黑

原创代码：

1. <style>
   
2. .mBox {
   
3.         --w: 200px;
   
4.         margin: auto;
   
5.         display: flex;
   
6.         justify-content: center;
   
7.         align-items: center;
   
8.         width: var(--w);
   
9.         height: var(--w);
   
10.         position: relative;
    
11. }
    
12. .zBox {
    
13.         position: absolute;
    
14.         display: block;
    
15.         border-style: solid;
    
16.         border-width: 1px;
    
17.         border-color: transparent darkgreen transparent transparent;
    
18. }
    
19. </style>
    
20. 
    
21. <div class="mBox"></div>
    
22. 
    
23. <script>
    
24. let ele = document.querySelector(".mBox");
    
25. let len= ele.clientWidth;
    
26. let zStr = "";
    
27. let all = 100;
    
28. let angle = Math.floor(360 / all);
    
29. for(j=0; j< all; j++){
    
30.         let wh =Math.floor(len- j * (len / all));
    
31.         zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
    
32. }
    
33. ele.innerHTML += zStr;
    
34. console.log(zStr);
    
35. </script>

复制代码

马黑黑

实现原理：

其实就是100个盒子像套娃一样套在一起（当然一个比一个小一点），没有背景色，只设置盒子的一个边框有颜色，最终图案就是由这100根线条组合而成。

绿叶清舟

这个效果漂亮

马黑黑

绿叶清舟 发表于 2022-4-24 20:45
这个效果漂亮

不知道像什么

绿叶清舟

马黑黑 发表于 2022-4-24 20:55
不知道像什么

象个螺

东篱闲人

马黑黑 发表于 2022-4-24 20:55
不知道像什么

抽象派的凤凰。。。

红影

像孔雀

加林森

老黑这个制作真美，如果动起来我想随着音乐声音想起，那就是音乐的动力了。

红影

想象力可以做出如此美妙的构思

马黑黑

绿叶清舟 发表于 2022-4-24 20:57
象个螺

也不完全像

马黑黑

红影 发表于 2022-4-24 21:40
想象力可以做出如此美妙的构思

对，想象力很重要

马黑黑

东篱闲人 发表于 2022-4-24 21:02
抽象派的凤凰。。。

这个说法得分

马黑黑

加林森 发表于 2022-4-24 21:35
老黑这个制作真美，如果动起来我想随着音乐声音想起，那就是音乐的动力了。

你可以让它动起来的

马黑黑

红影 发表于 2022-4-24 21:12
像孔雀

这个说法也得分

加林森

马黑黑 发表于 2022-4-24 21:51
你可以让它动起来的

我不行的。你试一试啊。肯定完美的。

马黑黑

加林森 发表于 2022-4-24 22:42
我不行的。你试一试啊。肯定完美的。

这个其实简单的，你可以参考一下之前的例子，自己尝试一下

加林森

马黑黑 发表于 2022-4-24 21:51
你可以让它动起来的

你试一试翻卷啊！

马黑黑

加林森 发表于 2022-4-24 22:53
你试一试翻卷啊！

给你个作业

东篱闲人

马黑黑 发表于 2022-4-24 21:50
这个说法得分

多少分？