CSS3 動畫時針,是一種實現時鐘動畫效果的技術。通過不同屬性的設置,可以實現時針的移動,并且可以設置動畫的速度、方向、起點、終點等等。
.clock { position: relative; width: 200px; height: 200px; border-radius: 50%; border: 5px solid #333; margin: 0 auto; } .hour { position: absolute; width: 0; height: 0; border-style: solid; border-width: 40px 10px 0 10px; border-color: red transparent transparent transparent; top: 50%; left: 50%; transform-origin: 50% 100%; animation: hour 43200s linear infinite; } @keyframes hour { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } }
在代碼中,我們首先創建一個容器 .clock,來容納我們的時針。然后通過設置 .hour 元素的樣式,來創建一個三角形時針。我們設置了元素的寬度為 0,高度為 0,并使用 border-style 屬性設置邊框樣式,同時使用 border-color 設置邊框顏色。接著我們設置時針的初始位置,即使用 top 和 left 屬性將時針移到容器的中心位置,并設置 transform-origin 屬性,來設置時針的旋轉中心。
最后,我們使用了 animation 屬性來設置時針的動畫效果。在 keyframes 中,我們定義了從 0% 到 100% 的動畫過程,在 0% 時設置時針的旋轉角度為 0deg,在 100% 時設置時針的旋轉角度為 360deg,即一圈完整的旋轉。并使用 linear 這一動畫函數來設置時針的勻速轉動。
通過上述代碼,我們就成功創建了一個 CSS3 動畫時針,并實現了時鐘動畫效果。
上一篇ajax 前臺 后臺代碼
下一篇$data php