实现用户输入文本的同心圆渲染效果

我在页面上做了一个**“感恩圈”**板块，想要实现的效果是文本呈同心圆排列，同时页面上放一个输入框，用户输入名字后点击提交，名字就能显示在右侧的指定区域里。

参考效果：文本以多层同心圆的形式排列，每个环形上的文字沿着圆弧分布，视觉上形成环绕的效果

之前我尝试过一些基础写法，但还没达到理想状态，下面给你分享一个可行的实现方案：

第一步：搭建基础HTML结构 #

先把页面的骨架搭好，包含输入区、同心圆展示区和右侧的名字展示区：

<div class="container">
  <!-- 输入区域 -->
  <div class="input-area">
    <input type="text" id="nameInput" placeholder="输入你的名字">
    <button id="submitBtn">提交</button>
  </div>
  
  <!-- 同心圆文本区 -->
  <div class="circle-container">
    <div class="circle-layer" data-radius="120"></div>
    <div class="circle-layer" data-radius="80"></div>
    <div class="circle-layer" data-radius="40"></div>
  </div>
  
  <!-- 右侧名字展示区 -->
  <div class="name-list">
    <h3>已提交的名字</h3>
    <div id="nameDisplay"></div>
  </div>
</div>

第二步：用CSS实现环形布局 #

通过transform和position来让每个文字元素沿着圆弧排列，同时给容器加一些基础样式：

.container {
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 20px;
}

.circle-container {
  position: relative;
  width: 300px;
  height: 300px;
}

.circle-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--radius) * 2px);
  height: calc(var(--radius) * 2px);
  border-radius: 50%;
  /* 可选：加个边框方便看层级 */
  border: 1px dashed #ccc;
}

.circle-layer span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  font-size: 14px;
}

.input-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.name-list {
  width: 200px;
}

第三步：用JavaScript处理交互和文本排列 #

写JS逻辑来完成两个核心功能：一是把输入的名字添加到右侧列表，二是把文本拆分成单个字符，放到对应的同心圆层级上：

// 获取DOM元素
const nameInput = document.getElementById('nameInput');
const submitBtn = document.getElementById('submitBtn');
const nameDisplay = document.getElementById('nameDisplay');
const circleLayers = document.querySelectorAll('.circle-layer');

// 提交按钮点击事件
submitBtn.addEventListener('click', () => {
  const name = nameInput.value.trim();
  if (!name) return;
  
  // 添加到右侧列表
  const nameItem = document.createElement('div');
  nameItem.textContent = name;
  nameDisplay.appendChild(nameItem);
  
  // 把名字放到同心圆上（这里可以自定义逻辑，比如循环放到不同层级）
  addTextToCircles(name);
  
  // 清空输入框
  nameInput.value = '';
});

// 将文本添加到同心圆的函数
function addTextToCircles(text) {
  // 先清空之前的文本
  circleLayers.forEach(layer => {
    layer.innerHTML = '';
  });
  
  // 把文本拆分成字符
  const chars = text.split('');
  const layerCount = circleLayers.length;
  // 平均分配字符到各个层级（可以根据需求调整分配逻辑）
  const charsPerLayer = Math.ceil(chars.length / layerCount);
  
  circleLayers.forEach((layer, index) => {
    const radius = parseInt(layer.dataset.radius);
    // 给当前层级设置CSS变量
    layer.style.setProperty('--radius', radius);
    
    // 获取当前层级要显示的字符
    const start = index * charsPerLayer;
    const end = start + charsPerLayer;
    const layerChars = chars.slice(start, end);
    
    // 计算每个字符的旋转角度
    const angleStep = 360 / layerChars.length;
    
    layerChars.forEach((char, charIndex) => {
      const span = document.createElement('span');
      span.textContent = char;
      // 计算旋转角度和位置
      const angle = charIndex * angleStep;
      const radian = (angle * Math.PI) / 180;
      // 定位字符到圆弧上
      span.style.transform = `
        translate(-50%, -${radius}px)
        rotate(${angle}deg)
      `;
      layer.appendChild(span);
    });
  });
}

// 可以先初始化一些示例文本
addTextToCircles("感恩有你 温暖同行");

这个方案的思路是把每个字符单独定位，通过旋转和偏移让它们沿着圆弧排列，同时交互逻辑也很清晰，输入提交后就能同步更新右侧列表和同心圆文本。你可以根据自己的需求调整同心圆的半径、字体大小、字符分配逻辑这些细节哦～

备注：内容来源于stack exchange，提问作者saif