寫這個動畫剛開始完全沒有思路，後來參考網上的資料發現可以用半圓實現，具體原理如下：
1.，乙個div作為背景，三個div做出三個半圓出來，乙個用於旋轉，乙個靠左（用於與背景吻合），乙個靠右（用於與背景吻合）。
2.做出另一組div更換背景色即可實現反方向的旋轉。
**如下：
doctype html
>
<
html
>
<
head
>
<
style
>
.outer
.cont1,.cont2
.cont1
.cont2
.rotatediv
.right
.left
/*.left-rotate:hover
.cont2 .left
/*css動畫
*/@keyframes rotate
100%
} @keyframes show
50%,100%
} @keyframes hide
50%,100%
}
style
>
head
>
<
body
>
//css3動畫
<
div
class
="outer"
>
<
div
class
="cont1"
>
<
div
class
="rotatediv"
>
div>
<
div
class
="right"
>
div>
<
div
class
="left"
>
div>
div>
<
div
class
="cont2"
>
<
div
class
="rotatediv"
>
div>
<
div
class
="right"
>
div>
<
div
class
="left"
>
div>
div>
div>
body
>
html
>
其中用到了乙個css3,動畫的step(1,end)，不太理解。。。
CSS3 圓形動畫導航
因為圓一共分為六份，每兩份被乙個父元素包裹，設定父元素旋轉，並且對沒乙份再次設定旋轉，使文字始終保持是正文不會出現傾斜，不易 html class box class top 1span 4span div class top 2span 5span div class top 6span 3spa...
css3的動畫實現
關鍵幀 keyframes 動畫名稱 20 40 60 80 100 animation name 定義乙個或者多個動畫的名稱 eg demo animation duration 動畫執行的時間 取值 0時，動畫不執行 time 正數 單位為s或者ms animation delay 動畫執行的延...
css3實現動畫效果
transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...