今天小千來給大家分享一期純CSS實(shí)現(xiàn)太極動(dòng)態(tài)效果的教程，最終的效果如下圖所示，完全沒用到JavaScript哦，看下去。

把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è)思路不對(duì)。那就只能將底面本身變?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屬性代碼：

上述操作完成之后就能夠看到文章開頭的動(dòng)態(tài)效果了，同學(xué)們趕緊去試試吧，僅僅是看明白了是不夠的哦。很多同學(xué)都是腦子說我會(huì)了，然后你的手說我才沒會(huì)~~

最后歡迎大家添加我們的web前端技術(shù)分享交流qq群：791201477  加群找群管理要學(xué)習(xí)資料或者項(xiàng)目代碼即可，等你來哦~~~~~