CSS鐘表擺動(dòng)是一種常見(jiàn)的頁(yè)面效果，它讓頁(yè)面上的鐘表看起來(lái)栩栩如生，增添了一份生動(dòng)的氣息。下面就讓我們一起來(lái)學(xué)習(xí)CSS鐘表擺動(dòng)的實(shí)現(xiàn)吧。

.clock-hand {
transform-origin: bottom center;  /* 設(shè)置旋轉(zhuǎn)中心 */
animation: swing 1.5s ease-in-out alternate infinite;  /* 設(shè)置動(dòng)畫 */
}
@keyframes swing {
0% {
transform: rotateZ(0deg); /* 開始旋轉(zhuǎn) */
}
100% {
transform: rotateZ(20deg); /* 旋轉(zhuǎn)到指定角度 */
}
}

以上代碼中，我們首先定義了一個(gè)名為.clock-hand的類，它包括兩部分樣式。第一部分是transform-origin，它指定了旋轉(zhuǎn)中心的位置，這里設(shè)置在鐘表指針的底部中心點(diǎn)。第二部分是animation，它指定了使用什么樣的動(dòng)畫效果，包括了動(dòng)畫的名稱、時(shí)長(zhǎng)、動(dòng)畫函數(shù)、動(dòng)畫方向和動(dòng)畫次數(shù)。這里我們使用的動(dòng)畫名稱是swing，它是我們自己定義的，包括了兩個(gè)關(guān)鍵幀，分別是開始狀態(tài)和結(jié)束狀態(tài)，通過(guò)transform屬性指定了開始和結(jié)束時(shí)鐘表指針的角度。

我們可以將以上代碼運(yùn)用到我們?cè)O(shè)計(jì)的鐘表頁(yè)面中，讓鐘表指針開始擺動(dòng)，增加頁(yè)面的趣味性。同時(shí)，我們也可以根據(jù)自己的需求調(diào)整動(dòng)畫的時(shí)長(zhǎng)、角度和動(dòng)畫函數(shù)，讓鐘表指針擺動(dòng)的形式更加自然。祝您成功實(shí)現(xiàn)CSS鐘表擺動(dòng)效果！