纯CSS实现倒计时效果不需要依赖JavaScript逻辑，仅通过CSS的动画和样式控制就能完成，适合轻量化的倒计时展示场景，实现方式主要分为数字递减和环形进度两种类型。
方案一：数字递减倒计时
这种方案的核心是借助CSS的@keyframes动画和counter计数器，实现数字从指定值逐步递减的效果。实现步骤如下：
1. 基础HTML结构
<div class="countdown"> <span class="countdown-number"></span> </div>
2. CSS样式与动画定义
首先定义计数器的初始值和动画逻辑，通过animation控制计数器每秒递减一次，同时配合content属性展示当前计数值。
/* 定义计数器，初始值为10 */
.countdown {
counter-reset: countdown 10;
}
/* 数字展示样式 */
.countdown-number::before {
content: counter(countdown);
font-size: 48px;
font-weight: bold;
color: #333;
/* 绑定动画，10秒完成10次递减，每个周期1秒 */
animation: countdown-animation 10s steps(10) forwards;
}
/* 定义关键帧动画，每次递减计数器值 */
@keyframes countdown-animation {
0% {
counter-reset: countdown 10;
}
10% {
counter-reset: countdown 9;
}
20% {
counter-reset: countdown 8;
}
30% {
counter-reset: countdown 7;
}
40% {
counter-reset: countdown 6;
}
50% {
counter-reset: countdown 5;
}
60% {
counter-reset: countdown 4;
}
70% {
counter-reset: countdown 3;
}
80% {
counter-reset: countdown 2;
}
90% {
counter-reset: countdown 1;
}
100% {
counter-reset: countdown 0;
}
}
实现原理说明
这里通过steps(10)将10秒的动画分成10个等长的阶段，每个阶段对应一次计数器递减，forwards属性保证动画结束后保持最后的状态。如果需要调整倒计时总时长，只需要修改动画总时长和steps的参数即可，比如5秒倒计时就设置为5s steps(5) forwards。
方案二：环形进度倒计时
环形倒计时常用于活动开场、页面加载等场景，核心是通过两个半圆元素的旋转配合clip-path裁剪实现进度效果，同时结合数字展示剩余时间。
1. HTML结构
<div class="ring-countdown"> <div class="ring-left"></div> <div class="ring-right"></div> <div class="ring-number">10</div> </div>
2. CSS样式实现
首先构建环形基础样式，左右两个半圆分别负责前半段和后半段的旋转，数字部分通过动画同步更新。
/* 环形容器 */
.ring-countdown {
width: 200px;
height: 200px;
position: relative;
margin: 40px auto;
}
/* 左右半圆基础样式 */
.ring-left, .ring-right {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%);
}
/* 右半圆初始隐藏，负责0-50%的进度 */
.ring-right {
clip-path: polygon(50% 50%, 50% 0, 0 0, 0 100%, 50% 100%);
opacity: 0;
}
/* 左半圆进度动画，前5秒旋转180度 */
.ring-left {
background: #409eff;
animation: left-rotate 5s linear forwards;
}
/* 右半圆进度动画，后5秒旋转180度 */
.ring-right {
background: #409eff;
animation: right-rotate 5s linear 5s forwards;
}
/* 数字展示 */
.ring-number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
font-weight: bold;
color: #333;
animation: number-change 10s steps(10) forwards;
}
/* 左半圆旋转关键帧 */
@keyframes left-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
/* 右半圆旋转关键帧 */
@keyframes right-rotate {
0% {
opacity: 1;
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
/* 数字变化关键帧 */
@keyframes number-change {
0% { content: "10"; }
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"; }
}
注意事项
这种环形方案的总时长是10秒，前半段5秒由左半圆完成180度旋转，后半段5秒由右半圆完成旋转，两个半圆的动画时间需要衔接准确。如果需要调整环形颜色、大小，只需要修改对应元素的background、width、height属性即可。
两种方案的适用场景
数字递减倒计时实现简单，适合只需要展示数字变化的轻量场景，比如验证码倒计时、简单活动倒计时。环形进度倒计时视觉效果更丰富，适合需要突出视觉感知的场景，比如活动开场、页面加载等待提示。
纯CSS实现的倒计时存在局限性，比如无法精准对应真实时间，页面切到后台时动画可能会暂停，如果需要高精度的倒计时，还是建议结合JavaScript的时间逻辑来实现。