倒計時圈圈是一種非常實用的效果，它可以用于各種場合，如電商網(wǎng)站的限時特價、活動網(wǎng)站的倒計時、游戲網(wǎng)站的戰(zhàn)斗倒計時等。使用 CSS 動畫技術(shù)，可以輕松實現(xiàn)這種效果。

.circular {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.circular .inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.circular .inner .num {
font-size: 28px;
font-weight: bold;
color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circular .inner .left {
clip: rect(0, 40px, 80px, 0);
}
.circular .inner .right {
clip: rect(0, 80px, 80px, 40px);
transform: rotate(180deg);
}
.circular .slice {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
clip: rect(0, 40px, 80px, 0);
transform-origin: center center;
}
.circular .slice .bar {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
clip: rect(0, 40px, 80px, 0);
background-color: #f00;
transform-origin: center center;
}

HTML 代碼如下：

<div class="circular">
<div class="inner">
<span class="num left">00</span>
<span class="num right">00</span>
</div>
<div class="slice">
<div class="bar"></div>
</div>
</div>

使用 JavaScript 實現(xiàn)倒計時，代碼如下：

function countDown() {
var count = 60;
var per = 360 / count;
var slice = document.querySelector(".circular .slice");
var bar = document.querySelector(".circular .bar");
var left = document.querySelector(".circular .left");
var right = document.querySelector(".circular .right");
var timer = setInterval(function() {
count--;
if (count< 0) {
clearInterval(timer);
} else {
var angle = count * per;
if (angle<= 180) {
left.style.transform = "rotate(" + angle + "deg)";
} else {
var rAngle = angle - 180;
left.style.transform = "rotate(180deg)";
right.style.transform = "rotate(" + rAngle + "deg)";
}
bar.style.transform = "rotate(" + angle + "deg)";
document.querySelector(".circular .num").innerHTML = count;
}
}, 1000);
}
countDown();

這樣，我們就實現(xiàn)了一個簡單的倒計時圓圈效果。通過上述代碼，我們可以根據(jù)實際需求對樣式進(jìn)行調(diào)整，并實現(xiàn)更加豐富的效果。