CSS是一種網頁樣式設計語言，用于設置網頁中元素的樣式。鐘擺動畫是CSS中其中一種比較有趣的動畫效果。

/* CSS代碼 */
.clock {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #333;
border-radius: 50%;
}
.hour {
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 50px;
margin: -25px 0 0 -2.5px;
background-color: #fff;
transform-origin: bottom center;
animation: hour-hand 12s infinite linear;
}
.minute {
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 70px;
margin: -35px 0 0 -1.5px;
background-color: #fff;
transform-origin: bottom center;
animation: minute-hand 1.2s infinite linear;
}
.second {
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 80px;
margin: -40px 0 0 -0.5px;
background-color: #f00;
transform-origin: bottom center;
animation: second-hand 1s infinite steps(60);
}
@keyframes hour-hand {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
@keyframes minute-hand {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
@keyframes second-hand {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}

以上代碼為CSS實現鐘擺動畫的樣例代碼，包含鐘表容器以及時針、分針、秒針三個指針的樣式設計。關鍵的動畫效果使用了CSS中的Animation屬性，通過調整Animation的屬性值，實現指針的旋轉效果。其中to和from關鍵字表示動畫的開始和結束位置，linear、steps(60)分別表示時分秒指針的速度和動畫運行的頻率。

通過這種方式實現鐘表的動畫效果，不僅使得頁面設計更為豐富多彩，同時也鍛煉了開發者對CSS的理解和掌握。