CSS手表秒針旋轉動畫是一種經典的CSS動畫效果,通過使用CSS3的transform屬性以及animation屬性,我們可以輕松地實現手表秒針的轉動效果。
.clock { position: relative; border-radius: 50%; width: 200px; height: 200px; background-color: #f5f5f5; } .hour-hand, .minute-hand, .second-hand { position: absolute; left: 50%; transform-origin: bottom center; transform: translateX(-50%); } .hour-hand { width: 6px; height: 50px; border-radius: 6px 6px 0 0; background-color: #333; } .minute-hand { width: 4px; height: 80px; border-radius: 4px 4px 0 0; background-color: #666; } .second-hand { width: 2px; height: 100px; border-radius: 2px 2px 0 0; background-color: #f00; animation: rotate 60s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
代碼中,我們首先定義了一個.clock類作為手表的容器。然后,我們使用三個絕對定位的手表指針元素,分別對應時針、分針和秒針。
對于秒針,我們通過使用animation屬性來實現動畫效果。通過定義一個rotate關鍵幀動畫,我們可以讓秒針在60秒內完成一圈旋轉,然后無限循環。
最后,我們只需要在HTML中添加一個.clock元素,并在其中添加三個指針元素即可。