环形旋转文字（Spinning Text）是什么：效果预览与 AI 设计提示词

效果预览

✦

适合用在哪

认证徽章、限量标签、「滚动我」提示、页脚角落的品牌印记。

容易踩的坑

文案长度不足以绕满一圈，首尾之间留出一段难看的空白缺口。
9.5px 中性灰小字持续旋转，几乎无法被完整读出。
旋转的 SVG 文字对读屏无意义，需给容器 aria-label 写明文案。

设计提示词 · Prompt

环形旋转文字（Spinning Text）：用 SVG 画一个半径 46px 的圆路径（d="M59,59 m-46,0 a46,46 0 1,1 92,0 a46,46 0 1,1 -92,0"），<textPath> 里放重复两遍的文案（保证绕满一圈，词间用「 · 」分隔）。整个 <svg> 用 rotate 360deg 线性 12s 无限循环缓慢自转。中心用绝对定位放一个 36×36px 的渐变圆，内嵌图标或短字母。文字 fill 用中性灰、字号 9.5px、字距 0.08em。

Spinning Text: use SVG to draw a circular path with radius 46px (d="M59,59 m-46,0 a46,46 0 1,1 92,0 a46,46 0 1,1 -92,0"), and put the copy repeated twice inside <textPath> (to ensure it wraps a full circle, separated by " · "). The whole <svg> rotates 360deg linearly over 12s, infinite, spinning slowly. In the center, absolutely position a 36×36px gradient circle containing an icon or short letters. Text fill is neutral gray, font size 9.5px, letter-spacing 0.08em.

常见搭配

同一页面里经常和「环形旋转文字」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

安全信任徽章Trust Badge 极简页脚Minimal Footer 分栏英雄区Split Hero

演示 HTML 结构

<div class="s d-center">
  <div class="tx-spin">
    <svg viewBox="0 0 118 118">
      <defs><path id="uiTxS" d="M59,59 m-46,0 a46,46 0 1,1 92,0 a46,46 0 1,1 -92,0" fill="none"/></defs>
      <text><textPath href="#uiTxS">SPINNING TEXT · 环形旋转文字 · SPINNING TEXT · 环形旋转文字 · </textPath></text>
    </svg>
    <div class="tx-spin__c">✦</div>
  </div>
</div>