css一行文字弧形排列

CSS中有许多有趣的应用，其中之一是将一行文字排列成弧形。这种效果可以为网站或应用程序增加一些互动性，同时也可以让其更加美观。

.curve-text {
  display: inline-block;
  transform: rotate(-0.5turn);
  transform-origin: 0% 100%;
  text-align: justify;
  letter-spacing: 0.2em;
}
.curve-text::before {
  content: "";
  display: inline-block;
  width: 50%;
}
.curve-text::after {
  content: "";
  display: inline-block;
  width: 50%;
} 

让我们一步一步地解释这些代码：

• 首先，我们使用display: inline-block将文本放置在一行内。
• 然后，我们使用transform: rotate(-0.5turn)使文本沿着一个弧形排列。
• 接下来，我们使用transform-origin: 0% 100%使文本的旋转点位于文本的起始位置。
• 为了让文本填充弧形，我们使用text-align: justify和letter-spacing: 0.2em为文本添加对齐和字符间距样式。
• 最后，我们使用::before和::after伪元素填充文本末尾周围的空白区域。

使用这些代码，我们可以轻松地为网站或应用程序添加一些有趣的弧形文字效果。