文本弧形排列演示

马黑黑 · 发表于 2025-7-30 18:23

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-7-30 18:24

参考代码

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

本帖最后由马黑黑于 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 属性的设置，根据布局需要操作。