<style>
#wrap {
margin: 20px auto;
position: relative;
width: 200px;
height: 200px; border-radius: 50%;
animation: rot 6s linear infinite;
opacity: 0.95;
}
ye-zi {
position: absolute;
left: calc(50% - 0.5 * var(--ww));
top: 0;
width: var(--ww);
height: 90px;
border-radius: 40px 40px 50px 50px;
background: linear-gradient(red, orange, green);
transform-origin: 50% 110%;
transform: rotate(var(--deg));
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="wrap"></div>
<script>
let all = 7;
Array.from({length: all}).forEach((item,key) => {
item = document.createElement('ye-zi');
item.style.cssText += `--ww: 52px; --deg: ${360 / all * key}deg;`;
wrap.appendChild(item);
});
</script> 是不是这个橙色有圆环的感觉？我把叶瓣变成了花瓣{:4_173:}加个“酱紫”的底色更有立体感
红影 发表于 2024-2-17 10:12
是不是这个橙色有圆环的感觉？我把叶瓣变成了花瓣加个“酱紫”的底色更有立体感
这是很漂亮的设计。点32个赞 红影 发表于 2024-2-17 10:07
“也不要太多，多了就变成齿轮或圆了。”
看到这个笑，现在知道齿轮怎么做了。如果想做的话
不过，齿轮可以更简约一些，用不着这么复杂呢 马黑黑 发表于 2024-2-17 11:54
这是很漂亮的设计。点32个赞
这些都是你的代码上改一下啊，连颜色都是你原来的配置{:4_173:} 马黑黑 发表于 2024-2-17 11:55
不过，齿轮可以更简约一些，用不着这么复杂呢
哦，这个还不知道怎么弄的。 红影 发表于 2024-2-18 20:46
哦，这个还不知道怎么弄的。
就是切 红影 发表于 2024-2-18 20:46
这些都是你的代码上改一下啊，连颜色都是你原来的配置
用在自己的帖子里就是自己的 马黑黑 发表于 2024-2-18 21:48
就是切
还是不知道{:4_173:} 马黑黑 发表于 2024-2-18 21:48
用在自己的帖子里就是自己的
嗯嗯，我准备空了去用一下{:4_187:} 红影 发表于 2024-2-18 22:57
还是不知道
clip-path 红影 发表于 2024-2-18 22:57
嗯嗯，我准备空了去用一下
期待 马黑黑 发表于 2024-2-18 22:58
clip-path
路径也是挺复杂的啊。 马黑黑 发表于 2024-2-18 22:58
期待
谢谢，还不知道能不能做出来呢{:4_187:} 红影 发表于 2024-2-19 12:16
谢谢，还不知道能不能做出来呢
有自信、有决心、有耐力的，就都可以 红影 发表于 2024-2-19 12:15
路径也是挺复杂的啊。
会了就不怎么复杂 马黑黑 发表于 2024-2-19 15:22
有自信、有决心、有耐力的，就都可以
嗯嗯，我也努力一下，争取做到三有{:4_187:} 马黑黑 发表于 2024-2-19 15:23
会了就不怎么复杂
那是当然，所谓的难者不会会者不难啊{:4_173:}
页:
1
[2]