利用CSS3 動(dòng)畫 繪畫 圓形動(dòng)態(tài)時(shí)鐘
我要評(píng)論什么是動(dòng)畫？這是我們應(yīng)該先了解的問(wèn)題。按照百度百科的解釋動(dòng)畫是采用逐幀拍攝對(duì)象并連續(xù)播放而形成運(yùn)動(dòng)的影像技術(shù)。不論拍攝對(duì)象是什么，只要它的拍攝方式是采用的逐格方式，觀看時(shí)連續(xù)播放形成了活動(dòng)影像，它就是動(dòng)畫。放在 CSS3 中大致可以理解為使元素從一種樣式逐漸變?yōu)榱硪环N樣式，即將多個(gè)過(guò)渡效果放在一起形成的效果。CSS3 動(dòng)畫是通過(guò) "關(guān)鍵幀"，來(lái)控制動(dòng)畫的每一步。這里又有一個(gè)問(wèn)題，什么是關(guān)鍵幀？我理解為定義動(dòng)畫執(zhí)行的時(shí)間點(diǎn)和在該時(shí)間點(diǎn)上的樣式是什么。
先給大家展示效果圖：
通過(guò) CSS3 動(dòng)畫繪制動(dòng)態(tài)時(shí)鐘的步驟
定義頁(yè)面布局和樣式
定義關(guān)鍵幀
- 定義頁(yè)面布局和樣式
- 定義關(guān)鍵幀
- 調(diào)用動(dòng)畫實(shí)現(xiàn)動(dòng)態(tài)效果調(diào)用動(dòng)畫實(shí)現(xiàn)動(dòng)態(tài)效果
注意點(diǎn)
- 在分針和秒針進(jìn)行旋轉(zhuǎn)時(shí)要保證是勻速旋轉(zhuǎn)，即 transform-timing-function 速度曲線的值為 linear
- 在分針和秒針進(jìn)行旋轉(zhuǎn)時(shí)要保證旋轉(zhuǎn)原點(diǎn)的位置，即 transform-origin 的值要為 center、bottom(也可以利用像素和百分比進(jìn)行改變)
- 分針和秒針進(jìn)行旋轉(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;/*定義秒針樣式和動(dòng)態(tài)效果*/
}
#minute {
width: 10px;
height: 80px;
background: #40A798;
position: absolute;
top: 70px;
left: 147px;
transform-origin: center bottom;
animation: minute 3600s linear infinite;/*定義分針樣式和動(dòng)態(tài)效果*/
}
@keyframes second {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}/*定義秒針過(guò)渡效果*/
@keyframes minute {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}/*定義分針過(guò)渡效果*/
總結(jié)
以上所述是小編給大家介紹的利用CSS3 動(dòng)畫 繪畫 圓形動(dòng)態(tài)時(shí)鐘，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
純CSS3實(shí)現(xiàn)運(yùn)行時(shí)鐘的示例代碼
這篇文章主要介紹了純CSS3如何實(shí)現(xiàn)運(yùn)行的時(shí)鐘，幫助大家更好的制作CSS3特效，美化網(wǎng)頁(yè)，感興趣的朋友可以了解下。2021-01-25
css3 利用transform打造走動(dòng)的2D時(shí)鐘
這篇文章主要介紹了css3 利用transform打造走動(dòng)的2D時(shí)鐘，幫助大家更好的利用cSS3制作特效，美化自身網(wǎng)頁(yè)，感興趣的朋友可以了解下2020-10-20
css3一個(gè)簡(jiǎn)易的 LED 數(shù)字時(shí)鐘實(shí)現(xiàn)方法
這篇文章主要介紹了css3一個(gè)簡(jiǎn)易的 LED 數(shù)字時(shí)鐘實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2020-01-15
CSS實(shí)現(xiàn)漂亮的時(shí)鐘動(dòng)畫效果的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)漂亮的時(shí)鐘動(dòng)畫效果的實(shí)例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-29
