未命名
<style>.mBox {
--w: 200px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: var(--w);
height: var(--w);
position: relative;
}
.zBox {
position: absolute;
display: block;
border-style: solid;
border-width: 1px;
border-color: transparent darkgreen transparent transparent;
}
</style>
<div class="mBox"></div>
<script>
let ele = document.querySelector(".mBox");
let len= ele.clientWidth;
let zStr = "";
let all = 100;
let angle = Math.floor(360 / all);
for(j=0; j< all; j++){
let wh =Math.floor(len- j * (len / all));
zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
}
ele.innerHTML += zStr;
console.log(zStr);
</script>
原创代码：
<style>
.mBox {
--w: 200px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: var(--w);
height: var(--w);
position: relative;
}
.zBox {
position: absolute;
display: block;
border-style: solid;
border-width: 1px;
border-color: transparent darkgreen transparent transparent;
}
</style>
<div class="mBox"></div>
<script>
let ele = document.querySelector(".mBox");
let len= ele.clientWidth;
let zStr = "";
let all = 100;
let angle = Math.floor(360 / all);
for(j=0; j< all; j++){
let wh =Math.floor(len- j * (len / all));
zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
}
ele.innerHTML += zStr;
console.log(zStr);
</script>
实现原理：
其实就是100个盒子像套娃一样套在一起（当然一个比一个小一点），没有背景色，只设置盒子的一个边框有颜色，最终图案就是由这100根线条组合而成。 这个效果漂亮 绿叶清舟 发表于 2022-4-24 20:45
这个效果漂亮
不知道像什么 马黑黑 发表于 2022-4-24 20:55
不知道像什么
象个螺{:4_189:} 马黑黑 发表于 2022-4-24 20:55
不知道像什么
抽象派的凤凰。。。{:5_116:} 像孔雀{:4_173:} 老黑这个制作真美，如果动起来我想随着音乐声音想起，那就是音乐的动力了。{:4_199:} 想象力可以做出如此美妙的构思{:4_199:} 绿叶清舟 发表于 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
你试一试翻卷啊！
给你个作业{:5_106:} 马黑黑 发表于 2022-4-24 21:50
这个说法得分
多少分？{:4_170:}