css-doodle ：@shape之clover意外发现

马黑黑

<css-doodle click-to-update>
	@grid: 4 / 400px;
	background: @p(green,darkgreen,lightgreen);
	@shape: clover @r(3,5);
</css-doodle>

运行代码

马黑黑

css-doodle 的 @shape 属性，多叶草的指令是 clover 数值 。其中，数值取整数，三叶草取 3，四叶草取 4， 五叶草取 5，多叶草也就是这几种了，取值范围在 3 至 5 之间的整数，小于 3  则等于 3，大于 5 则等于 5。

一楼的例子，我们用了 @r(3,5) 来进行取值，@r() 函数取浮点数随机数， @r(3,5) 得到的数值不是整数，而是从 3.0 到 5.0 之间的浮点数。从运行效果看，clover 的浮点数赋值是被接受的，呈现出来的图案不规整而已。不规整但却与自然界的常见现象相暗合。

一楼，运行代码后，可以点击多叶草演示区域，观察随机的变化。

马黑黑

如果想突破多叶草的叶数限制，请使用 @shape() 函数。以下是该函数的演示，可以修改红色数字后查看运行效果，请注意观察偶数与奇数的区别：

<css-doodle click-to-update>
	@grid: 2 / 400px;
	background: @p(green,darkgreen,lightgreen);
	clip-path: @shape(
		points: 200;
		r: cos(7t);
	);
</css-doodle>

运行代码

同样的，本例的 @shape() 函数也支持浮点数。

焱鑫磊

棒棒哒！

红影

好奇妙，明明多叶草只支持整数，但是用浮点数赋值时居然接受小数了。

红影

马黑黑 发表于 2023-6-6 08:05
.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum ...

这个也很奇怪，奇数时得到了这个数字的叶瓣，偶数时得到的是双倍的叶瓣。

梦缘

来看看意外发现，感谢老师！

南无月

我来这里点一会儿玩一下

南无月

需要好多花的时候就可以用。。

马黑黑

南无月 发表于 2023-6-6 22:07
我来这里点一会儿玩一下

好玩多玩

马黑黑

红影 发表于 2023-6-6 10:06
好奇妙，明明多叶草只支持整数，但是用浮点数赋值时居然接受小数了。

袁川是用 clip-path 切割出各种形状吧，算法里考虑了兼容问题

马黑黑

南无月 发表于 2023-6-6 22:08
需要好多花的时候就可以用。。

可以可以

马黑黑

红影 发表于 2023-6-6 10:08
这个也很奇怪，奇数时得到了这个数字的叶瓣，偶数时得到的是双倍的叶瓣。

是的，所以我提示注意观察

马黑黑

梦缘 发表于 2023-6-6 11:07
来看看意外发现，感谢老师！

马黑黑

醉美水芙蓉 发表于 2023-6-6 11:43
老师又有新作品啦！

红影

马黑黑 发表于 2023-6-6 22:10
袁川是用 clip-path 切割出各种形状吧，算法里考虑了兼容问题

黑黑的发现在别处看不到呢，厉害

红影

马黑黑 发表于 2023-6-6 22:11
是的，所以我提示注意观察

这个是什么原理呢？

马黑黑

红影 发表于 2023-6-6 23:14
这个是什么原理呢？

具体我也说不上来

马黑黑

红影 发表于 2023-6-6 23:14
黑黑的发现在别处看不到呢，厉害

也是偶然发现的