什么是動畫？這是我們應該先了解的問題。按照百度百科的解釋動畫是采用逐幀拍攝對象并連續(xù)播放而形成運動的影像技術。不論拍攝對象是什么，只要它的拍攝方式是采用的逐格方式，觀看時連續(xù)播放形成了活動影像，它就是動畫。放在 CSS3 中大致可以理解為使元素從一種樣式逐漸變?yōu)榱硪环N樣式，即將多個過渡效果放在一起形成的效果。CSS3 動畫是通過 "關鍵幀"，來控制動畫的每一步。這里又有一個問題，什么是關鍵幀？我理解為定義動畫執(zhí)行的時間點和在該時間點上的樣式是什么。
先給大家展示效果圖：
通過 CSS3 動畫繪制動態(tài)時鐘的步驟
定義頁面布局和樣式
定義關鍵幀
定義頁面布局和樣式 定義關鍵幀 調(diào)用動畫實現(xiàn)動態(tài)效果調(diào)用動畫實現(xiàn)動態(tài)效果注意點
在分針和秒針進行旋轉(zhuǎn)時要保證是勻速旋轉(zhuǎn)，即 transform-timing-function 速度曲線的值為 linear 在分針和秒針進行旋轉(zhuǎn)時要保證旋轉(zhuǎn)原點的位置，即 transform-origin 的值要為 center、bottom(也可以利用像素和百分比進行改變) 分針和秒針進行旋轉(zhuǎn)的速度要區(qū)分以下是 HTML 源碼
| <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>clock</title> </head> <body> <div id="main"> <div id="second"></div> <div id="minute"></div> </div> </body></html> |
以下是 CSS3 源碼
| #main { width: 300px; height: 300px; border: 5px solid #0881A3; border-radius: 50%; margin: 50px auto 0; position: relative;/*定義表盤樣式*/}#second { width: 5px; height: 120px; background: #393E46; position: absolute; top: 30px; left: 150px; transform-origin: center bottom; animation: second 60s linear infinite;/*定義秒針樣式和動態(tài)效果*/}#minute { width: 10px; height: 80px; background: #40A798; position: absolute; top: 70px; left: 147px; transform-origin: center bottom; animation: minute 3600s linear infinite;/*定義分針樣式和動態(tài)效果*/}@keyframes second { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}/*定義秒針過渡效果*/@keyframes minute { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}/*定義分針過渡效果*/ |
總結(jié)
以上所述是小編給大家介紹的利用CSS3 動畫 繪畫 圓形動態(tài)時鐘，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！
新聞熱點
疑難解答
