CSS 倒計時效果是一個很酷的特效，可以用于展示時間限制或者促銷活動的倒計時。在本文中，我們將介紹如何使用 CSS 實現一個簡單的倒計時特效。

HTML 代碼
<div class="countdown-container">
<div class="countdown">
<div class="countdown-item">
<span class="countdown-time days"></span>
<span class="countdown-text">days</span>
</div>
<div class="countdown-item">
<span class="countdown-time hours"></span>
<span class="countdown-text">hours</span>
</div>
<div class="countdown-item">
<span class="countdown-time minutes"></span>
<span class="countdown-text">minutes</span>
</div>
<div class="countdown-item">
<span class="countdown-time seconds"></span>
<span class="countdown-text">seconds</span>
</div>
</div>
</div>
CSS 代碼
.countdown-container {
display: inline-block;
background: #f2f2f2;
padding: 10px 20px;
border-radius: 5px;
}
.countdown {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 10px;
}
.countdown-time {
font-size: 24px;
}
.countdown-text {
text-transform: uppercase;
font-size: 12px;
margin-top: 5px;
}
JavaScript 代碼
var countdownDate = new Date("Jan 1, 2022 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countdownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.querySelector(".days").innerHTML = days;
document.querySelector(".hours").innerHTML = hours;
document.querySelector(".minutes").innerHTML = minutes;
document.querySelector(".seconds").innerHTML = seconds;
if (distance< 0) {
clearInterval(x);
document.querySelector(".countdown-container").innerHTML = "The Countdown is Over!";
}
}, 1000);

以上是一個簡單的倒計時效果的實現。在 HTML 中，我們為倒計時容器添加了一個 class 名稱為 "countdown-container"，倒計時主體為 "countdown"，計時板塊為 "countdown-item"，并且設置了不同的 class 名稱以便于給每個元素添加不同的樣式。在 JavaScript 中，我們定義了倒計時結束時間以及使用 setInterval 函數更新倒計時計時器。

該倒計時效果可以通過調整 CSS 樣式和 JavaScript 代碼來實現不同的效果和功能。在使用 CSS 實現倒計時效果時，注意要使用 flexbox 布局來使元素正確地對齊。同時還要注意調整字體大小和排版，以確保倒計時的可讀性。在 JavaScript 中，可以使用 Date 對象和 Interval 函數來實現動態倒計時效果。