如何使用纯CSS实现简单圆形倒计时动画

实现思路 #

完全不需要SCSS的变量、循环等预编译能力，仅靠原生CSS属性和动画就能实现，核心逻辑如下：

• 基础结构只需要3层DOM：外层圆形外壳、左右两个半圆遮罩、中间白色小圆（用来遮挡中心区域，形成环形进度条效果）
• 动画逻辑：先转动右侧遮罩180度，转满之后再转动左侧遮罩180度，刚好覆盖完整的倒计时周期，不需要复杂的角度计算
• 所有参数直接在CSS属性里修改即可，适配不同时长、尺寸、样式的需求

完整代码示例 #

HTML结构 #

<div class="countdown-circle">
  <div class="mask right"></div>
  <div class="mask left"></div>
  <div class="inner-circle">
    <span class="time-text">10</span>
  </div>
</div>

CSS样式 #

/* 外层圆形容器 */
.countdown-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #e0e0e0; /* 倒计时环形背景色 */
  overflow: hidden;
}
/* 通用半圆遮罩样式 */
.mask {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #2196f3; /* 进度条颜色 */
  transform-origin: right center;
}
/* 右侧遮罩，先执行转动动画 */
.mask.right {
  right: 0;
  animation: rotate-right 10s linear forwards;
}
/* 左侧遮罩，等右侧转满180度后再执行转动 */
.mask.left {
  left: 0;
  transform: rotate(180deg);
  animation: rotate-left 10s linear forwards;
  animation-delay: 10s;
}
/* 中间白色小圆，遮挡中心区域形成环形效果 */
.inner-circle {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 倒计时数字样式，用steps动画实现数字跳变 */
.time-text {
  font-size: 48px;
  font-weight: bold;
  color: #333;
  animation: count-num 1s steps(1, end) 10 forwards;
}
.time-text::before {
  content: "10";
}

/* 右侧遮罩转动动画 */
@keyframes rotate-right {
  to { transform: rotate(180deg); }
}
/* 左侧遮罩转动动画 */
@keyframes rotate-left {
  to { transform: rotate(360deg); }
}
/* 数字跳变动画 */
@keyframes count-num {
  10% { content: "9"; }
  20% { content: "8"; }
  30% { content: "7"; }
  40% { content: "6"; }
  50% { content: "5"; }
  60% { content: "4"; }
  70% { content: "3"; }
  80% { content: "2"; }
  90% { content: "1"; }
  100% { content: "0"; }
}

参数调整说明 #

• 修改倒计时总时长：同步调整右侧遮罩的动画时长、左侧遮罩的动画时长和延迟值、数字动画的总时长即可，比如要做30秒倒计时，就把三个值都改成30s，再对应调整数字动画的关键帧即可
• 修改环形粗细：调整.inner-circle的top/left/width/height百分比即可，百分比越小环形越粗
• 不需要数字展示：直接删掉.time-text相关的DOM和样式即可，不影响环形动画的正常运行
• 修改配色：直接替换外层容器的背景色、遮罩的进度色即可

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