文本椭圆形布局演示

马黑黑

本例，每一个文本个体所在的 span 元素通过 offset-distance 设置自己在 offset-path 路径上的位置，具体定位的实现在 JS 里完成：

<style>
#wrapper {
	width: 400px;
	height: 200px;
	margin: 20px auto;
	position: relative;
	border: 1px solid gray;
}
#wrapper > span {
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	text-align: center;
	font: bold 20px / 40px sans-serif;
	color: blue;
	background: gray;
	border-radius: 50%;
	offset-path: path('M80 100 a120 80 0 1 0 240 0 a120 80 0 1 0 -240 0z');
	offset-rotate: 0deg;
}
</style>

<div id="wrapper"></div>

<script>
let text_ar = '君不见黄河之水天上来'.split('');
text_ar.forEach( (item,key) => {
	let sp = document.createElement('span');
	sp.innerText = item;
	sp.style.cssText += `
		offset-distance: ${100 / text_ar.length * key}%;
	`;
	wrapper.appendChild(sp);
});
</script>

运行代码

提示：offset-rotate 规定元素在 offset-path 上自身朝向的属性，默认值为 auto，随路径变化而自然改变自己的朝向。本例是文本布局，所以值设为 0，不调整朝向，永远躺平。

一斛珠

沙发看天文

一斛珠

给黑黑老师

红影

纯css加JS的椭圆形文字排布，真棒。

红影

椭圆上的圆圈其实css就做完了，关键是文字的加入。原来只要给出offset-distance 就能把文字一个个排布上去了呢

梦缘

感谢老师的分享，问好！

马黑黑

梦缘 发表于 2023-6-5 15:24
感谢老师的分享，问好！

下午好

马黑黑

一斛珠 发表于 2023-6-5 13:26
沙发看天文

好看不

马黑黑

一斛珠 发表于 2023-6-5 13:26
给黑黑老师

谢鼓

马黑黑

红影 发表于 2023-6-5 13:58
纯css加JS的椭圆形文字排布，真棒。

还行吧？主要是演示一下原理

马黑黑

红影 发表于 2023-6-5 14:01
椭圆上的圆圈其实css就做完了，关键是文字的加入。原来只要给出offset-distance 就能把文字一个个排布上去 ...

offset-path路径中，offset-distance是定位元素，还有一个重要的值就是 offset-rotate，是否跟随路径旋转

南无月

文本位置的教程

马黑黑

南无月 发表于 2023-6-5 20:47
文本位置的教程

文本只是个示例，严格讲，这是元素沿 offset-path 定位

红影

马黑黑 发表于 2023-6-5 18:05
还行吧？主要是演示一下原理

嗯嗯，通过这个知道怎么弄了

红影

马黑黑 发表于 2023-6-5 18:07
offset-path路径中，offset-distance是定位元素，还有一个重要的值就是 offset-rotate，是否跟随路径旋转

对对，除了定位了，还对旋转也做限制

南无月

马黑黑 发表于 2023-6-5 21:18
文本只是个示例，严格讲，这是元素沿 offset-path 定位

那就是元素定位教程。

马黑黑

南无月 发表于 2023-6-6 18:30
那就是元素定位教程。

是演示

马黑黑

红影 发表于 2023-6-6 16:12
对对，除了定位了，还对旋转也做限制

必要的时候

马黑黑

红影 发表于 2023-6-6 16:11
嗯嗯，通过这个知道怎么弄了

不错

南无月

马黑黑 发表于 2023-6-6 19:15
是演示

那就是描红本儿