上面這個兩個簡單的動畫，是用 animation-timing-function: steps(); 這個屬性實現的，具體如何實現，看下面：
這上面的圖片，也就是我們的素材，
有些人，可能不是很理解 關鍵幀容器，和 steps 之間的關系，沒關系，看下面的圖解
下面做鍾表
用到的素材，如上所示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } @keyframes secondRun { 0% { transform: rotate(180deg); } /* 由於，我們只需要他 轉一圈，所以，我們定義好一圈的角度即可 */ 100% { transform: rotate(540deg); } } .wra { width: 200px; height: 200px; position: relative; left: calc(50% - 100px); top: 100px; /*父元素的 基本布局*/ background-image: url('./img/clock/clock.png'); background-size: 100% 100%; } .hour { position: absolute; left: 95px; top: 95px; /*把時針，定位到 中間點*/ width: 10px; height: 45px; background-image: url('./img/clock/hour.png'); background-size: 100% 100%; z-index: 2; } .minute { position: absolute; left: 95px; top: 95px; /*把分針定位到中間點*/ width: 10px; height: 66px; background-image: url('./img/clock/minute.png'); background-size: 100% 100%; animation: secondRun 3600s infinite steps(60, end); /*steps 把總時長分割成 60 3600/60 =60 所以需要運動 60步* 60s走一次 */ transform-origin: center 5px; /*要旋轉，就要有旋轉的中心點， 設置旋轉的中心點。*/ transform: rotate(180deg); /*因為，默認的指針是指向 6 我們需要讓他指向 12 所需要旋轉 180度 */ z-index: 1; } .second { position: absolute; left: 98px; top: 77px; /*把秒針定位到中間點*/ width: 5px; height: 84px; background-image: url('./img/clock/second.png'); background-size: 100% 100%; animation: secondRun 60s infinite steps(60, end); /*steps 把總時長分割成 1 60/60 = 1 所以需要運動 60步， 1s 走一次*/ transform-origin: center 23px; /*要旋轉，就要有旋轉的中心點， 設置旋轉的中心點。*/ transform: rotate(180deg); /*因為，默認的指針是指向 6 我們需要讓他指向 12 所需要旋轉 180度 */ z-index: 3; } </style> </head> <body> <div class="wra"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </div> </body> </html>
以下是素材，如何獲取素材？ 右鍵 檢查， 就能找到 該圖片的url 了。
