这个叶瓣效果也很美
<style>#wrap {
margin: 20px auto;
position: relative;
width: 200px;
height: 200px;
animation: rot 6s linear infinite;
}
ye-zi {
position: absolute;
left: calc(50% - 0.5 * var(--ww));
top: 0;
width: var(--ww);
height: 100px;
border-radius: 0% 100%;
background: linear-gradient(red, orange, green);
transform-origin: 50% 100%;
transform: rotate(var(--deg));
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="wrap"></div>
<script>
let all = 5;
Array.from({length: all}).forEach((item,key) => {
item = document.createElement('ye-zi');
item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
wrap.appendChild(item);
});
</script> 代码
<style>
#wrap {
margin: 20px auto;
position: relative;
width: 200px;
height: 200px;
animation: rot 6s linear infinite;
}
ye-zi {
position: absolute;
left: calc(50% - 0.5 * var(--ww));
top: 0;
width: var(--ww);
height: 100px;
border-radius: 0% 100%;
background: linear-gradient(red, orange, green);
transform-origin: 50% 100%;
transform: rotate(var(--deg));
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="wrap"></div>
<script>
let all = 5;
Array.from({length: all}).forEach((item,key) => {
item = document.createElement('ye-zi');
item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
wrap.appendChild(item);
});
</script>
#wrap 和 yz-zi 的尺寸关系，应该能看得出来：yz-zi的高度是 #wrap 的一半。
然后，第 29 行，--ww 变量是叶瓣的宽度，不同的宽度，外观会不一样，可以多加尝试。--deg 变量 不要去更改，它依据总数 all 自行按设定的算法计算，all 是可以改变的，一般建议 5 以上，也不要太多，多了就变成齿轮或圆了。
CSS中，叶瓣的颜色通过线性背景色设置，可以尝试变为不同的颜色组合。 这个像花朵一样呢{:4_173:} 红的花瓣了{:4_199:} 黑黑精彩不断 小辣椒 发表于 2024-2-15 15:04
黑黑精彩不断
哪里哪里 马黑黑 发表于 2024-2-15 19:15
哪里哪里
这里这里 醉美水芙蓉 发表于 2024-2-15 20:08
欣赏黑黑老师新款播放器！
这个还没有做成播放控制器 小辣椒 发表于 2024-2-15 19:39
这里这里
{:4_172:} 估计又要突发奇想，造个啥新奇的玩具给你徒弟们玩{:4_170:} 樵歌 发表于 2024-2-16 09:09
估计又要突发奇想，造个啥新奇的玩具给你徒弟们玩
{:4_170:} 马黑黑 发表于 2024-2-16 09:13
这个师尊不错{:4_189:} 樵歌 发表于 2024-2-16 14:02
这个师尊不错
{:4_203:} 马黑黑 发表于 2024-2-16 16:32
你徒弟都这样说{:4_173:} 樵歌 发表于 2024-2-16 21:36
你徒弟都这样说
是不是啊？我有木有徒弟 马黑黑 发表于 2024-2-15 13:38
#wrap 和 yz-zi 的尺寸关系，应该能看得出来：yz-zi的高度是 #wrap 的一半。
然后，第 29 行，--ww 变 ...
“也不要太多，多了就变成齿轮或圆了。”
看到这个笑，现在知道齿轮怎么做了。如果想做的话{:4_173:} 感觉这的配色很漂亮，尤其橙色带圆环的感觉。 “不同的宽度，外观会不一样，可以多加尝试。”
去试了一个，等这个楼层回完正好翻页，我把试验的发来{:4_173:}
页:
[1]
2