用css+html做多叶草
<style>#mydiv {
margin: 100px auto;
width: 80px;
height: 80px;
filter: drop-shadow(0 0 1px darkgreen);
position: relative;
}
.leaf {
position: absolute;
left: -50%;
top: -50%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, yellow, green);
border-radius: 80% 0%;
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translateY(80px);
}
.leaf:nth-of-type(1) { --deg: 0deg; }
.leaf:nth-of-type(2) { --deg: 72deg; }
.leaf:nth-of-type(3) { --deg: 144deg; }
.leaf:nth-of-type(4) { --deg: 216deg; }
.leaf:nth-of-type(5) { --deg: 288deg; }
</style>
<div id="mydiv">
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
</div> <h2>代码：</h2>
<div class="hE"><pre>
<style>
#mydiv {
margin: 80px auto;
width: 80px;
height: 80px;
filter: drop-shadow(0 0 1px darkgreen);
position: relative;
}
.leaf {
position: absolute;
left: -50%;
top: -50%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, yellow, green);
border-radius: 80% 0%;
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translateY(80px);
}
.leaf:nth-of-type(1) { --deg: 0deg; }
.leaf:nth-of-type(2) { --deg: 72deg; }
.leaf:nth-of-type(3) { --deg: 144deg; }
.leaf:nth-of-type(4) { --deg: 216deg; }
.leaf:nth-of-type(5) { --deg: 288deg; }
</style>
<div id="mydiv">
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
</div>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script> 说明：
一、需要一个容器装载叶片，设置好宽高相等的尺寸，叶片的尺寸和容器一样。
二、叶片左定位、上定位均为 -50% 以便旋转后整体在容器中居中。实际上，多叶草整体会大于容器（这叫爆盆）。
三、叶片CSS选择器使用 class选择器，即 .xxx，然后，有多少个叶片，就写多少个 .xxx:nth-of-type(n) {} 伪类选择器用于记录 --deg 变量值。--deg 取值计算方法为：360/n*叶片序号，叶片序号从 0 起算。
四、有多少张叶片，就需要写多少个 span 标签，span标签需要 class="xxx" 属性语句。 本帖最后由 马黑黑 于 2024-8-22 19:23 编辑
叶片使用渐变背景，不同的 border-radius 背景角度应是不一样的，反正好看就行。大家可以多试试；
叶片选择器的 border-radius 属性至关重要，它是叶片形状的构造者。双值以上才能构建叶片效果。使用多少个值、各值取值如何，通过尝试会有很多新奇的发现。建议查一查 border-radius 多值的资料，它最多可以有八个值；
叶片选择器的 transform-origin: 100% 100%; 属性设置针对叶片旋转，是叶片旋转的中心，可以改变以便得到不同的效果；
叶片的宽高也是可以修改的，但是修改后居中定位需要算力，可以自行尝试；
可以考虑使用JS动态生成叶片，参考代码如下：
<script>
Array.from({length: total = 5}).forEach((i,k) => {
i = document.createElement('span');
i.className = 'leaf';
i.style.cssText += `
--deg: ${360/total * k}deg;
`;
mydiv.appendChild(i);
});
</script>仅需改变 total = 5 中的 5 即可得到自己需要的N叶草。 马黑黑 发表于 2024-8-22 18:32
叶片使用渐变背景，不同的 border-radius 背景角度应是不一样的，反正好看就行。大家可以多试试；
叶片 ...
果然用js更方便，连改变叶瓣数量都变得方便了{:4_187:} 不过用css+html也好，便于苦练基本功，先有一个个写的不方便，才更感觉到js的好{:4_173:} 红影 发表于 2024-8-22 20:00
不过用css+html也好，便于苦练基本功，先有一个个写的不方便，才更感觉到js的好
多练练 这个空间关系想明白还挺难，叶瓣设置left: -50%; top: -50%;，也就是但选择transform-origin: 100% 100%;时，转点在原来的叶瓣没移位前的中心点上。
旋转并移动translateY(80px)，到这里有点想不明白，第一个叶瓣旋转平移后，绿色的顶点到达原来的中心，第二片转了72度再平移，感觉绿色顶点不会对上原中心似的 好吧，在原始位置加两个参照边框，果然这样设置，旋转任何一个角度，都是绕着参照框中心的。
我明白了，旋转加y的平移，并不是直线的上下了，原来这个是同时运作的结果，现在明白了{:4_187:} 开始把y当做独立的运动了，怪不得想不明白。嗯嗯，现在知道了{:4_205:} 马黑黑 发表于 2024-8-22 20:12
多练练
写它的十几二十几个叶瓣出来，才是真的练了{:4_173:} 红影 发表于 2024-8-22 21:16
写它的十几二十几个叶瓣出来，才是真的练了
反正不嫌多 红影 发表于 2024-8-22 20:36
这个空间关系想明白还挺难，叶瓣设置left: -50%; top: -50%;，也就是但选择transform-origin: 100% 100%;时 ...
这个无需与颜色关联。translate目的在于扯开，你可以试着不扯，就是0px，然后border-radius也设置为0，看看效果 醉美水芙蓉 发表于 2024-8-22 21:03
欣赏老师漂亮的多叶草播放器！
这个现在只是图案 红影 发表于 2024-8-22 20:41
好吧，在原始位置加两个参照边框，果然这样设置，旋转任何一个角度，都是绕着参照框中心的。
我明白了，旋 ...
这个问题是 rotate+translate做圆周运动的特殊效果，很多人都不懂，也理解不了 马黑黑 发表于 2024-8-22 21:28
反正不嫌多
而且要用css+html写，哦也不难呢，不过是角度评分，然后html 多几行而已{:4_173:} 马黑黑 发表于 2024-8-22 21:30
这个无需与颜色关联。translate目的在于扯开，你可以试着不扯，就是0px，然后border-radius也设置为0，看 ...
是的，我就是用了一个叶瓣直接去看效果的，还加了个边框，然后看明白是怎么回事了{:4_173:}知道和颜色无关，我只是用它来说明是在哪个端头。
例如使用translateX(80px) 不用Y用X也行，这个时候就是黄色朝里，说明端头的变化。
提颜色是用来理解空间关系的。
马黑黑 发表于 2024-8-22 21:34
这个问题是 rotate+translate做圆周运动的特殊效果，很多人都不懂，也理解不了
我现在用单瓣的去一点点试，终于整明白了{:4_173:} 红影 发表于 2024-8-22 22:03
我现在用单瓣的去一点点试，终于整明白了
这是个好办法