把2d靜態(tài)的太極圖改成了3d，陰極和陽極分到了兩個平面里實現(xiàn)旋轉效果，這個好實現(xiàn)，重點是實現(xiàn)它的透明效果，平面太極圖顯示出兩極是用另加的塊元素擋住底面的顏色，但如果上圖的兩極用遮擋來實現(xiàn)效果的話并不能實現(xiàn)透明，將遮擋的塊設為透明又會顯示出底面原本的樣子，所以這個思路不對。那就只能將底面本身變?yōu)橥该鳎趺磳崿F(xiàn)既透明又能出現(xiàn)這種樣子呢？漸變，而且為了能出現(xiàn)圓的樣子選擇了徑向漸變。

　　效果：

　　路明確，開始操作

　　一個極分成四個塊，圓頭，肚子，尾，還有分離的小圓。

　　第一塊圓，中間透明。

　　第二塊與之相連，為了不遮擋第一塊中間的圓所以要改一下

　　給右上角加圓角屬性改為半圓，加上徑向漸變，原點改為靠左居中再調一下透明的百分比。

　　陽極結構代碼如下：

　　陽極css代碼如下：

　　陽極效果圖如下：

　　陰極結構代碼如下：

　　陰極css代碼如下：

　　陰極效果圖如下：

　　陽極加陰極效果圖：

　　將2d平面轉換為3d代碼如下：

　　將2d平面轉換為3d效果如下：

　　創(chuàng)建動畫關鍵幀及添加animation屬性代碼：

　　陽極動畫關鍵幀：

　　給陽極添加animation屬性代碼：

　　陰極動畫關鍵幀：

　　給陰極添加animation屬性代碼：

　　最終效果圖如下：

　　完成！

　　總結：

　　整體沒有難度，難在想到它的透明并且怎樣去實現(xiàn)。因為不能用常規(guī)的遮擋，只能讓自身實現(xiàn)透明效果。順著這個思路想到徑向漸變然后去實現(xiàn)效果，有了思路剩下的就是常規(guī)的敲了。

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。

　　注：本文部分文字和圖片來源于網(wǎng)絡，如有侵權，請聯(lián)系刪除。版權歸原作者所有!