用css+html做多叶草

马黑黑

马黑黑

代码：

<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>

马黑黑

说明：

一、需要一个容器装载叶片，设置好宽高相等的尺寸，叶片的尺寸和容器一样。

二、叶片左定位、上定位均为 -50% 以便旋转后整体在容器中居中。实际上，多叶草整体会大于容器（这叫爆盆）。

三、叶片CSS选择器使用 class选择器，即 .xxx，然后，有多少个叶片，就写多少个 .xxx:nth-of-type(n) {} 伪类选择器用于记录 --deg 变量值。--deg 取值计算方法为：360/n*叶片序号，叶片序号从 0 起算。

四、有多少张叶片，就需要写多少个 span 标签，span标签需要 class="xxx" 属性语句。

马黑黑

叶片使用渐变背景，不同的 border-radius 背景角度应是不一样的，反正好看就行。大家可以多试试；

叶片选择器的 border-radius 属性至关重要，它是叶片形状的构造者。双值以上才能构建叶片效果。使用多少个值、各值取值如何，通过尝试会有很多新奇的发现。建议查一查 border-radius 多值的资料，它最多可以有八个值；

叶片选择器的 transform-origin: 100% 100%; 属性设置针对叶片旋转，是叶片旋转的中心，可以改变以便得到不同的效果；

叶片的宽高也是可以修改的，但是修改后居中定位需要算力，可以自行尝试；

可以考虑使用JS动态生成叶片，参考代码如下：

1. <script>
   
2. Array.from({length: total = 5}).forEach((i,k) => {
   
3.         i = document.createElement('span');
   
4.         i.className = 'leaf';
   
5.         i.style.cssText += `
   
6.                 --deg: ${360/total * k}deg;
   
7.         `;
   
8.         mydiv.appendChild(i);
   
9. });
   
10. </script>

复制代码

仅需改变 total = 5 中的 5 即可得到自己需要的N叶草。

红影

马黑黑 发表于 2024-8-22 18:32
叶片使用渐变背景，不同的 border-radius 背景角度应是不一样的，反正好看就行。大家可以多试试；

叶片 ...

果然用js更方便，连改变叶瓣数量都变得方便了

红影

不过用css+html也好，便于苦练基本功，先有一个个写的不方便，才更感觉到js的好

马黑黑

红影 发表于 2024-8-22 20:00
不过用css+html也好，便于苦练基本功，先有一个个写的不方便，才更感觉到js的好

多练练

红影

这个空间关系想明白还挺难，叶瓣设置left: -50%; top: -50%;，也就是但选择transform-origin: 100% 100%;时，转点在原来的叶瓣没移位前的中心点上。
旋转并移动translateY(80px)，到这里有点想不明白，第一个叶瓣旋转平移后，绿色的顶点到达原来的中心，第二片转了72度再平移，感觉绿色顶点不会对上原中心似的

红影

好吧，在原始位置加两个参照边框，果然这样设置，旋转任何一个角度，都是绕着参照框中心的。
我明白了，旋转加y的平移，并不是直线的上下了，原来这个是同时运作的结果，现在明白了

红影

开始把y当做独立的运动了，怪不得想不明白。嗯嗯，现在知道了

红影

马黑黑 发表于 2024-8-22 20:12
多练练

写它的十几二十几个叶瓣出来，才是真的练了

马黑黑

红影 发表于 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 多几行而已

红影

马黑黑 发表于 2024-8-22 21:30
这个无需与颜色关联。translate目的在于扯开，你可以试着不扯，就是0px，然后border-radius也设置为0，看 ...

是的，我就是用了一个叶瓣直接去看效果的，还加了个边框，然后看明白是怎么回事了知道和颜色无关，我只是用它来说明是在哪个端头。
例如使用translateX(80px) 不用Y用X也行，这个时候就是黄色朝里，说明端头的变化。
提颜色是用来理解空间关系的。

红影

马黑黑 发表于 2024-8-22 21:34
这个问题是 rotate+translate做圆周运动的特殊效果，很多人都不懂，也理解不了

我现在用单瓣的去一点点试，终于整明白了

马黑黑

红影 发表于 2024-8-22 22:03
我现在用单瓣的去一点点试，终于整明白了

这是个好办法