用css做一個陰陽太極

來自專欄菜鳥前端前行之路

如圖所示，我們來做一個太極陰陽圖，打眼一瞧，第一反應可能是要用三個div盒子來做就可以啦，一個大圓包裹在外面，兩個小圓在內，大圓的兩個不同顏色也可以通過css3 line gradient.generator 線性漸變生成的代碼來做，看起來似乎很簡單，但我們今天只用一個div盒子來做，主要是學習一下兩個偽元素after 和 before。

/* CSS3 語法 */

element::before { 樣式 }

/* （單冒號）CSS2 過時語法 (僅用來支持 IE8) */

element:before { 樣式 }

/* 在每一個p元素前插入內容 */

p::before { content: "Hello world!"; }

舉個例子來看一下：

<q> 死亡萬花筒 </q> 真好看！

css里加上偽元素

q::before { content: "?"; color: blue;}q::after { content: "?"; color: red;}

結果就是：

所以同理，我們就利用這個來做太極陰陽圖

陰陽圖就做好了，我們再來進一步讓它動起來，添加圖示代碼

可以看到結果：

這樣就ok啦，最後丟一個網址慢慢做一些好玩的圖形~