如何仅使用CSS实现带环绕旋转星星的完整圆形进度动画

现有代码问题梳理 #

• 语法错误：CSS开头多了冗余的}、@keyframes lds-ring没有闭合、.lds-ring div:nth-child(4)的动画延迟规则重复定义
• 缺少星星元素的样式与环绕动画逻辑
• 环形动画的参数与目标效果的运动节奏不匹配

完整修正代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="circle-orbit-container" style="width: 300px;height: 300px;margin: 100px auto;">
    <div id="inner-orbit" class="lds-ring">
      <div class="progress-ring"></div>
      <div class="progress-ring"></div>
      <div class="progress-ring"></div>
      <div class="progress-ring"></div>
      <div class="progress-ring"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
    </div>
  </div>
</body>
</html>

CSS代码（style.css） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
}

/* 环形进度条样式 */
.progress-ring {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 8px solid #14213D;
  border-radius: 50%;
  animation: lds-ring 2.2s cubic-bezier(0.9, 0, 0.3, 0) infinite;
  border-color: #14213D transparent transparent transparent;
}

.progress-ring:nth-child(1) {
  animation-delay: -1.1s;
}
.progress-ring:nth-child(2) {
  animation-delay: -0.85s;
}
.progress-ring:nth-child(3) {
  animation-delay: -0.65s;
}
.progress-ring:nth-child(4) {
  animation-delay: -0.45s;
}
.progress-ring:nth-child(5) {
  animation-delay: -0.3s;
}

/* 星星样式与环绕动画 */
.star {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fca311;
  border-radius: 50%;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  animation: star-orbit 3s linear infinite;
}

.star:nth-child(6) {
  animation-delay: -0.6s;
}
.star:nth-child(7) {
  animation-delay: -1.2s;
}
.star:nth-child(8) {
  animation-delay: -1.8s;
}
.star:nth-child(9) {
  animation-delay: -2.4s;
}
.star:nth-child(10) {
  animation-delay: -3s;
}

/* 环形进度动画 */
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

/* 星星环绕动画 */
@keyframes star-orbit {
  0% {
    transform: rotate(0deg) translateX(-150px);
  }
  100% {
    transform: rotate(360deg) translateX(-150px);
  }
}

调整说明 #

• 新增了星星元素，通过旋转动画实现环绕效果，可根据需要调整星星大小、颜色、轨道半径
• 修复了原有代码的所有语法错误，删除了重复的规则定义
• 调整了环形进度条的动画参数，增加了透明度变化，实现渐进消失的拖尾效果
• 可根据实际需求调整容器大小，同步修改星星translateX的偏移量即可适配不同尺寸

内容的提问来源于stack exchange，提问作者Divyesh Manchekar