針對CSS動畫，有一個非常有趣的效果稱之為針動畫。它可以讓我們在網(wǎng)頁中添加一些細(xì)致的效果，增加用戶的交互體驗(yàn)。

.needle-wrapper {
position: relative;
width: 100px;
height: 100px;
}
.needle {
position: absolute;
left: 50%;
top: 50%;
margin-left: -1px;
margin-top: -30px;
height: 60px;
width: 2px;
border: 1px solid #000;
border-radius: 2px;
transform-origin: bottom center;
animation: needleAnimation 1s infinite;
}
@keyframes needleAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

在上面的代碼中，我們首先創(chuàng)建一個針的容器，容器的大小可以自行定義。接著，我們在容器中創(chuàng)建一個針，使用絕對定位將針放置到容器的中心位置。

需要注意的是，我們將針的高度設(shè)置為60px。這是因?yàn)樵趧赢嬮_始時，針的初始位置是垂直向下的。同時，我們設(shè)置了針的旋轉(zhuǎn)中心為底部中心點(diǎn)。

然后，我們定義了一個 keyframes，將針從 0deg 旋轉(zhuǎn)到 360deg。最后，我們將這個 keyframes 應(yīng)用到針的動畫中，使針不斷地旋轉(zhuǎn)。

通過上述的代碼，我們可以實(shí)現(xiàn)一個非常有趣的針動畫效果。在實(shí)際應(yīng)用中，還可以通過修改針的樣式和動畫細(xì)節(jié)實(shí)現(xiàn)更加精美的效果。