站長(zhǎng)資訊網(wǎng)
方法：1、用“border-radius:100%”設(shè)置元素為圓形；2、用“@keyframes 名稱{100%{transform:rotate(360deg);}}”設(shè)置動(dòng)畫；3、用“animation:名稱 時(shí)間”給元素綁定動(dòng)畫效果。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3怎么實(shí)現(xiàn)圓形轉(zhuǎn)動(dòng)的效果
border-radius 允許你設(shè)置元素的外邊框圓角。當(dāng)使用一個(gè)半徑時(shí)確定一個(gè)圓形，當(dāng)使用兩個(gè)半徑時(shí)確定一個(gè)橢圓。這個(gè)(橢)圓與邊框的交集形成圓角效果。
使用@keyframes規(guī)則，你可以創(chuàng)建動(dòng)畫。
創(chuàng)建動(dòng)畫是通過(guò)逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。
在動(dòng)畫過(guò)程中，您可以更改CSS樣式的設(shè)定多次。
指定的變化時(shí)發(fā)生時(shí)使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。
0％是開(kāi)頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義為0％和100％的選擇器。
語(yǔ)法為：
@keyframes animationname {keyframes-selector {css-styles;}}
animation屬性語(yǔ)法為：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
-
animation-name 指定要綁定到選擇器的關(guān)鍵幀的名稱
-
animation-duration 動(dòng)畫指定需要多少秒或毫秒完成
-
animation-timing-function 設(shè)置動(dòng)畫將如何完成一個(gè)周期
-
animation-delay 設(shè)置動(dòng)畫在啟動(dòng)前的延遲間隔。
-
animation-iteration-count 定義動(dòng)畫的播放次數(shù)。
-
animation-direction 指定是否應(yīng)該輪流反向播放動(dòng)畫。
-
animation-fill-mode 規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。
-
animation-play-state 指定動(dòng)畫是否正在運(yùn)行或已暫停。
示例如下：
<html> <head> <meta charset="utf-8"> <title>123</title> <style> #example1 { background:#dddddd; width:100px; height:100px; border-radius:100%; text-align:center; animation:fadenum 5s; } @keyframes fadenum{ 100%{transform:rotate(360deg);} } </style> </head> <body> <div id="example1"> 這是一個(gè)圓 </div> <br><br> </body> </html>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程）
