如何用CSS、HTML（按需用JavaScript）实现带旋转半径的圆形动画？

下面是用HTML+CSS实现的方案，不需要JavaScript就能完成需求：

<div class="circle-container">
  <div class="circle"></div>
  <div class="radius"></div>
</div>

/* 容器用于定位内部元素 */
.circle-container {
  position: relative;
  width: 200px;
  height: 200px;
}

/* 基础圆形样式 */
.circle {
  width: 100%;
  height: 100%;
  border: 3px solid #333;
  border-radius: 50%;
  box-sizing: border-box;
}

/* 旋转半径轴样式 */
.radius {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background-color: #ff4444;
  transform-origin: left center; /* 以半径左端（圆心）为旋转中心 */
  animation: rotateRadius 10s linear infinite; /* 10秒一圈，匀速无限循环 */
}

/* 旋转动画关键帧定义 */
@keyframes rotateRadius {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

关键细节说明 #

• 容器用position: relative，让内部绝对定位的半径轴以容器为基准定位到圆心
• 圆形通过border-radius: 50%实现，box-sizing: border-box避免边框撑大整体尺寸
• 半径轴的transform-origin设置为左端，确保旋转时绕圆心转动
• 调整animation里的10s可以改变旋转速度，数值越大旋转越慢

内容的提问来源于stack exchange，提问作者Renan Mougenot