CSS實現(xiàn)秒針轉(zhuǎn)動動畫

在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建秒針轉(zhuǎn)動動畫，這個規(guī)則允許我們定義動畫的關(guān)鍵幀，從而實現(xiàn)秒針從0度到360度的旋轉(zhuǎn)。

我們需要創(chuàng)建一個包含秒針樣式的元素，這個元素可以是一個div，其中包含一個span來顯示秒針。

<div class="second-hand">
  <span class="second-hand-inner"></span>
</div>

我們可以使用CSS來定義這個元素的樣式。

.second-hand {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
.second-hand-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50px;
  background-color: #000;
  transform-origin: 50% 50%;
}

我們可以使用@keyframes規(guī)則來創(chuàng)建秒針轉(zhuǎn)動的動畫。

@keyframes second-hand-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

我們可以將這個動畫應(yīng)用到秒針上。

.second-hand-inner {
  animation: second-hand-rotate 1s linear infinite;
}

在這個例子中，我們將動畫設(shè)置為每秒旋轉(zhuǎn)一圈，并且設(shè)置為無限循環(huán)，你可以根據(jù)需要調(diào)整這些值。