把2d靜態(tài)的太極圖改成了3d，陰極和陽極分到了兩個(gè)平面里實(shí)現(xiàn)旋轉(zhuǎn)效果，這個(gè)好實(shí)現(xiàn)，重點(diǎn)是實(shí)現(xiàn)它的透明效果，平面太極圖顯示出兩極是用另加的塊元素?fù)踝〉酌娴念伾?，但如果上圖的兩極用遮擋來實(shí)現(xiàn)效果的話并不能實(shí)現(xiàn)透明，將遮擋的塊設(shè)為透明又會(huì)顯示出底面原本的樣子，所以這個(gè)思路不對。那就只能將底面本身變?yōu)橥该?，但怎么?shí)現(xiàn)既透明又能出現(xiàn)這種樣子呢？漸變，而且為了能出現(xiàn)圓的樣子選擇了徑向漸變。

　　效果：

　　路明確，開始操作

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

　　第一塊圓，中間透明。

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

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

　　陽極結(jié)構(gòu)代碼如下：

　　陽極css代碼如下：

　　陽極效果圖如下：

　　陰極結(jié)構(gòu)代碼如下：

　　陰極css代碼如下：

　　陰極效果圖如下：

　　陽極加陰極效果圖：

　　將2d平面轉(zhuǎn)換為3d代碼如下：

　　將2d平面轉(zhuǎn)換為3d效果如下：

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

　　陽極動(dòng)畫關(guān)鍵幀：

　　給陽極添加animation屬性代碼：

　　陰極動(dòng)畫關(guān)鍵幀：

　　給陰極添加animation屬性代碼：

　　最終效果圖如下：

　　完成！

　　總結(jié)：

　　整體沒有難度，難在想到它的透明并且怎樣去實(shí)現(xiàn)。因?yàn)椴荒苡贸Ｒ?guī)的遮擋，只能讓自身實(shí)現(xiàn)透明效果。順著這個(gè)思路想到徑向漸變?nèi)缓笕?shí)現(xiàn)效果，有了思路剩下的就是常規(guī)的敲了。

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

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