文本椭圆形布局演示之css-doodle版

马黑黑

本例，在 css-doodle 中让每一个文本个体所在的单元格通过 offset-distance 设置自己在 offset-path 路径上的位置，具体定位算法在 css-doodle 代码中使用 CSS 的 calc 函数完成：

<css-doodle grid="10x1">
	:doodle {
		@size: 400px 200px;
		border: 1px solid rebeccapurple;
	}
	@size: 40px;
	@place: 20px 20px;
	background: rebeccapurple;
	border-radius: 50%;
	color: #fff;
	:after { content: '@pn([君不见黄河之水天上来])'; }
	offset-path: path('M80 100 a120 80 0 1 0 240 0 a120 80 0 1 0 -240 0z');
	offset-distance: calc(100 / @size * (@i - 1) * 1%);
	offset-rotate: 0deg;
</css-doodle>

运行代码

马黑黑

第七行代码，

@place: 20px 20px;

这是元素（单元格）初始定位设置。参与到 offset-path 路径中来的所有元素（单元格）都应在加入到路径前初始定位到父元素的左上角，一般使用绝对定位后则无需设置 left 和 top 属性值，因为默认都为 0px  的；在 css-doodle 里原理同，但本例并没有设置单元格为  position: absolute; 定位，所以需要通过 @place  属性对单元格进行事前定位，因 css-doodle 的特殊性，@place(宽/2 高/2) 恰好对应 left: 0px; 及 top: 0px; 属性叠加。

南无月

这个代码只有一丢丢

马黑黑

醉美水芙蓉 发表于 2023-6-5 20:11
黑黑老师设计的这个文字是不是会旋转的？

要它们旋转干嘛

马黑黑

南无月 发表于 2023-6-5 20:49
这个代码只有一丢丢

它背后是 76Kb 的库

红影

这个更好，比前面那个带JS的代码少了很多，同样能让文字椭圆排列。很赞

马黑黑

红影 发表于 2023-6-5 22:09
这个更好，比前面那个带JS的代码少了很多，同样能让文字椭圆排列。很赞

原理不变的

梦缘

谢谢老师分享，问好！

红影

马黑黑 发表于 2023-6-5 22:30
原理不变的

通过对比感受到了doodle的简洁

南无月

马黑黑 发表于 2023-6-5 21:17
它背后是 76Kb 的库

哈哈就那个你家拉瓜大瀑布似的JS库

马黑黑

南无月 发表于 2023-6-6 18:29
哈哈就那个你家拉瓜大瀑布似的JS库

不是我家的，是你家的

马黑黑

红影 发表于 2023-6-6 16:38
通过对比感受到了doodle的简洁

背后的库有70多Kb

南无月

马黑黑 发表于 2023-6-6 19:16
不是我家的，是你家的

国际公用称呼你家拉瓜

马黑黑

南无月 发表于 2023-6-6 21:52
国际公用称呼你家拉瓜

但是不是俺家的瓜

红影

马黑黑 发表于 2023-6-6 19:17
背后的库有70多Kb

库里复杂了，这里简单了

马黑黑

红影 发表于 2023-6-6 22:45
库里复杂了，这里简单了

库是支撑

红影

马黑黑 发表于 2023-6-6 22:49
库是支撑

非常强大的支撑

马黑黑

红影 发表于 2023-6-6 23:21
非常强大的支撑

还在发展中

红影

马黑黑 发表于 2023-6-6 23:28
还在发展中

简直是功德无量啊