如何实现由线条在中心组成圆形的CSS加载器？

嘿，我看你想实现一个由中心辐射线条组成的圆形加载器，你的现有代码已经有了基础思路，但还没完成，我帮你完善并优化一下，让它达到预期效果！

首先，咱们先梳理下现有代码的问题：你用了多个独立命名的div条，但没把它们定位到中心并旋转排列，而且动画mymove也没有定义，所以没法呈现圆形加载的效果。下面是调整后的完整实现方案：

完整实现代码 #

<div class="circle">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  /* 可选：给容器加个边框，方便看范围 */
  /* border: 1px solid #eee; */
}

.line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 50%;
  background-color: red;
  /* 把旋转原点设置为线条底部中心，也就是容器的圆心 */
  transform-origin: bottom center;
  /* 给每条线添加动画，延迟依次递增 */
  animation: pulse 1.5s ease-in-out infinite;
}

/* 给每条线设置不同的旋转角度，均匀分布在360度 */
.line:nth-child(1) { transform: translateX(-50%) rotate(0deg); animation-delay: 0s; }
.line:nth-child(2) { transform: translateX(-50%) rotate(30deg); animation-delay: 0.125s; }
.line:nth-child(3) { transform: translateX(-50%) rotate(60deg); animation-delay: 0.25s; }
.line:nth-child(4) { transform: translateX(-50%) rotate(90deg); animation-delay: 0.375s; }
.line:nth-child(5) { transform: translateX(-50%) rotate(120deg); animation-delay: 0.5s; }
.line:nth-child(6) { transform: translateX(-50%) rotate(150deg); animation-delay: 0.625s; }
.line:nth-child(7) { transform: translateX(-50%) rotate(180deg); animation-delay: 0.75s; }
.line:nth-child(8) { transform: translateX(-50%) rotate(210deg); animation-delay: 0.875s; }
.line:nth-child(9) { transform: translateX(-50%) rotate(240deg); animation-delay: 1s; }
.line:nth-child(10) { transform: translateX(-50%) rotate(270deg); animation-delay: 1.125s; }
.line:nth-child(11) { transform: translateX(-50%) rotate(300deg); animation-delay: 1.25s; }
.line:nth-child(12) { transform: translateX(-50%) rotate(330deg); animation-delay: 1.375s; }

/* 定义闪烁动画：透明度和轻微缩放变化 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) rotate(var(--rotate)) scale(1);
  }
  50% {
    opacity: 0.3;
    transform: translateX(-50%) rotate(var(--rotate)) scale(0.8);
  }
}

关键优化点说明 #

• 统一类名：把原来的div1/div6/div7改成统一的.line，减少重复代码，更易维护。
• 中心定位与旋转：通过transform-origin: bottom center让每条线围绕容器圆心旋转，再用nth-child给每条线设置不同的旋转角度，形成圆形排列。
• 流畅动画：使用pulse动画实现线条的闪烁效果，配合递增的动画延迟，让加载器有流动的动态感。
• 响应式适配：如果需要调整加载器大小，只需要修改.circle的宽高即可，线条会自动适配。

你可以根据自己的需求调整线条的宽度、颜色、数量，或者修改动画的速度和效果哦！

内容的提问来源于stack exchange，提问作者Bhawesh Bhaskar