注本頭條號，專注做前端。

這是一個中國人都非常熟悉的太極圖案，分陰陽兩級，會旋轉（用到css3 animation動畫屬性），通過純css3實現，可以看出是通過若干個小圓組合而成，適合初學css3的人練練手，娛以致學。

//

比于CSS2，CSS3增加了很多有關于視覺享受上面的特效，這些特效在平時的頁面里面也許只是在一些非常不起眼的出現，但實際上如果運用得當，這些特效將會出現非常酷炫的效果。今天，我們就一起來用CSS3的一些新的樣式（漸變、過渡動畫、圓角），來實現一個非常漂亮的太極圓盤。首先，我們先來看一下最后的效果：

當鼠標放上去之后還會出現旋轉的動畫：

怎么樣，是不是非常的炫酷？效果看起來非常不錯，但實際上用代碼實現起來卻非常的簡單，下面由我一步一步進行解析，一步步將這個太極效果實現。第一步，先將太極的輪廓（圓形）畫出來，順便做一個絕對居中：

樣式：

此時我們的太極圖標是看不見的，不要著急，這是因為我們現在沒有給他填充顏色，下面進行第二步，也是最為關鍵的一步。第二步，使用漸變將太極的內部畫出來，：

效果：

什么？只有一個半圓形的黑色？不要著急，這是因為太極的上半部分是白色的，所以和我們的背景色重復了，我們只需要再給太極加上一個外陰影，就可以看清太極的輪廓了：

效果：

怎么樣，是不是看起來炫酷了很多？第三步，使用偽元素將太極內部的兩個原點勾勒出來，先使用偽元素畫出一個圓圈，然后用邊框將圓球內白外黑的效果實現，最后用定位移動到太極的左部居中：

效果：

怎么樣？是不是看出來了一點端倪？第四步，用同樣的方法將右面的原點實現出來：

效果：

最后一步，為太極加上旋轉效果：

然后給#gossip加上過度動畫：

就這樣，一個炫酷的太極效果就這樣被我們實現出來了，同樣的方法還可以做一個太陽、星球、精靈球等等，授人以魚不如授人以漁，方法教給大家之后，剩下的就靠大家各自的想象力去實現了！

未經許可禁止轉載。

家好今天跟大家分享的是純CSS實現旋轉太極圖的方法，首先我們來看下效果：

接下來我們來看一下它的實現過程：

一、構建HTML：

HTML

二、CSS樣式設置：

1、基本樣式格式化

2、太極圖主題樣式：設置相同的寬高，并通過“border-radius：50%”轉為圓形，position設為relative相對定位，給一個1像素的灰色邊框，最后通過animation引入后面的動畫。

3、黑白部分設置：黑白兩部分的寬均為父元素的50%，高度為父元素的100%，通過absolute定位在一左一右，然后通過border-radius去掉左右兩側多余的部分與太極主體圓形完全重合。

4、圓弧部分設置：主要原理就是用一個黑色和一個白色的圓形進行覆蓋從而形成圓弧，這里注意一下尺寸和定位就行了。

5、黑白圓點設置：同上面的操作方法基本類似，通過border-radius設置兩個圓形，調整尺寸和背景顏色并通過定位放到合適的位置即可

6、添加動畫：通過@keyframes設置動畫，主體部分延Z軸旋轉360度，步驟2中以引用此處。