純前端CSS實現(xiàn)動態(tài)太極陰陽魚效果

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

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

效果：

思路明確，開始操作

一個極分成四個塊，圓頭，肚子，尾，還有分離的小圓。第一塊圓，中間透明。

第二塊與之相連，為了不遮擋第一塊中間的圓所以要改一下，給右上角加圓角屬性改為半圓，加上徑向漸變，原點改為靠左居中再調(diào)一下透明的百分比。

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

陽極css代碼如下：

陽極效果圖如下：

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

陰極css代碼如下：

陰極效果圖如下：

陽極加陰極效果圖：

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

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

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

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

給陽極添加animation屬性代碼：

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

給陰極添加animation屬性代碼：

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

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