文本弧形排列演示
<style>#ma {
margin: 20px auto;
width: 400px;
height: 300px;
border: 1px solid gray;
position: relative;
}
.title-text {
position: absolute;
left: calc(50% - 35px);
top: calc(50% + 70px);
width: 70px;
height: 70px;
font: bold 60px / 70px sans-serif;
color: tan;
text-align: center;
text-shadow: 0px 0px 1px red;
transform: rotate(var(--a)) translate(150px) rotate(calc(-1 * var(--a)));
}
</style>
<div id="ma"></div>
<script>
const txtAr = '萬紫千紅總是春'.split('');
txtAr.forEach( (t,k) => {
const s = document.createElement('span');
s.textContent = t;
s.classList.add('title-text');
s.style.cssText += `--a: ${180 / (txtAr.length - 1) * k + 180}deg`;
ma.appendChild(s);
});
</script> 参考代码
<style>
#ma {
margin: 20px auto;
width: 400px;
height: 300px;
border: 1px solid gray;
position: relative;
}
.title-text {
position: absolute;
left: calc(50% - 35px);
top: calc(50% + 70px);
width: 70px;
height: 70px;
font: bold 60px / 70px sans-serif;
color: tan;
text-align: center;
text-shadow: 0px 0px 1px red;
transform: rotate(var(--a)) translate(150px) rotate(calc(-1 * var(--a)));
}
</style>
<div id="ma"></div>
<script>
const txtAr = '萬紫千紅總是春'.split('');
txtAr.forEach( (t,k) => {
const s = document.createElement('span');
s.textContent = t;
s.classList.add('title-text');
s.style.cssText += `--a: ${180 / (txtAr.length - 1) * k + 180}deg`;
ma.appendChild(s);
});
</script>
本帖最后由 马黑黑 于 2025-7-30 18:52 编辑
过去我们有过类似的演示，这里且当复习，并做一些扩展。
原理：
将文本拆分为单字（或字母），每一个字都装在独立的 span 标签里，span 标签使用预设好的CSS类。所有的标签都定死在一个位置上，然后通过 transform 属性的 rotate 旋转函数和 translate 平移函数配合使用使得 span 标签挪动到预设的位置：rotate(角度) + translate(距离) 的方法令元素绕圈排列，再加 rotate(负角度)令文本站立着而不是歪七扭八的。
圆的角度是 360 度，0度在三点钟方向。遵循文本流从左到右的规则，第一个字应该在 180 度的位置上。只绕半圈，所以文本排列在 180度~360度 之间，360度也是三点钟方向。所以，每个字在圆的多少度的算法式子是：180 / (字数 - 1) + 180，加号前的式子是每个字应分配多少度，加号后面的数字是起始度数；（字数 - 1）可能不好理解，可以努力想一想。
需要弧形图面朝下的，式子改为 -180 / (字数 - 1) + 180 即可。凸面朝右或朝左需要另外设置式子（起止点不同了）。
另外，可能我们不需要半圆形式的弧形，这可以修改起始、终止点，算法跟上。例如算法， 120 / (字数 - 1) + 210，它表示从 210 度开始，所以被分配的度数减去头尾各30度共120度。应用实例：Apex
一楼的演示中，父元素的宽高是无所谓的，但是要注意的是，文本所在 span 的类选择器中，transform 属性的 translate(距离)的距离设定要合适，否则文本会跑到外面去，一般而言，距离就是文本的活动半径，其尺寸不应大于从文字原地到容器边缘的距离。
至于 span 标签的 top、left 属性的设置，根据布局需要操作。
去看了应用实例，其实没有0度线做参照，180还是120度，比较难分辨。{:4_187:}
当然，120度表明只在一段弧上分布，而不是整个半圆上分布。去试了 60 / (字数 - 1) + 240，则文字的分布更平缓了，也更挤了，需要translate(150px) 也跟着调一下了。 旋转加平移，让元素绕圈排列，再反向扭转回文字方向。这个记得黑黑是有过讲解的。不过已经忘记了，再看黑黑讲义，仍然如新学般喜悦{:4_199:} 美观、新颖的文本弧形排列，谢谢马老师精彩分享{:4_191:} 杨帆 发表于 2025-7-30 20:11
美观、新颖的文本弧形排列，谢谢马老师精彩分享
{:4_191:} 红影 发表于 2025-7-30 19:48
旋转加平移，让元素绕圈排列，再反向扭转回文字方向。这个记得黑黑是有过讲解的。不过已经忘记了，再看黑黑 ...
复习比全新学习容易一些 红影 发表于 2025-7-30 19:40
去看了应用实例，其实没有0度线做参照，180还是120度，比较难分辨。
当然，120度表明只在一段弧 ...
其实就是在圆周上确定起止点 马黑黑 发表于 2025-7-30 20:49
复习比全新学习容易一些
是的，而且可以再次加深印象呢{:4_187:} 马黑黑 发表于 2025-7-30 20:49
其实就是在圆周上确定起止点
嗯，平分的角度越小，弧度就越小，字体排列就越平缓。 红影 发表于 2025-7-30 22:27
嗯，平分的角度越小，弧度就越小，字体排列就越平缓。
是这个原理 红影 发表于 2025-7-30 22:26
是的，而且可以再次加深印象呢
温故知新 很美的弧形文字排列，精彩！{:4_190:} 梦江南 发表于 2025-7-31 08:31
很美的弧形文字排列，精彩！
{:4_190:} 马黑黑 发表于 2025-7-30 23:35
是这个原理
去试了一下，就很清楚了{:4_187:} 马黑黑 发表于 2025-7-30 23:35
温故知新
看黑黑又弄了一种实现方式，后面的好像更容易操控点{:4_187:} 红影 发表于 2025-7-31 21:37
看黑黑又弄了一种实现方式，后面的好像更容易操控点
应该是这么个意思 马黑黑 发表于 2025-7-31 23:23
应该是这么个意思
黑黑厉害{:4_187:} 红影 发表于 2025-8-1 11:30
黑黑厉害
厉害了我的歌{:4_170:}