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