前端特效【第03期】|果汁混合效果-上

前幾天有一個熱心的小夥伴找到我說，我看到一個很好看的效果，可不能夠講講？

這種要求我向來是不會拒絕的，因而就有了今天的案例。一樣，你們之後若是有什麼想要了解的效果的話，也能夠在下方留言給我，說不定個人下一個視頻講解就是你想要的案例哦...

先上圖看看卡哇伊的設計：

固然光看靜圖沒什麼意思，想要看最終效果的話，掃描下方二維碼就看到啦：

可能對於剛剛接觸前端不久的小夥伴來講，效果稍微複雜了一點點，不要緊我會把這個效果分紅了兩篇文章來去講解，今天要講的是下面的圓形菜單的效果的具體實現方法；

正式開講前，讓咱們先把它拆開來看看，這樣有便於咱們更好的理清思路

如上圖所示，拆開了以後就能夠發現下面的菜單其實就是一個圓上面定位放了幾個圖標，這些圖標分別有它自身的父級，父級經過旋轉必定的角度就能獲得一個扇形的效果了。

最後點擊圖標的時候去旋轉下面的圓形元素就能夠獲得效果了。固然這部分要涉及到一點點js的基礎，因此若是對js基礎還不夠了解的同窗的話呢建議先去看看妙味的JS基礎視頻哦。

JS動畫涉及到的知識點有 ：

獲取元素 querySelector、querySelectorAll

for循環 for(var i=0;i<item.length;i++){...}

添加點擊事件 item.onclick = function(){...}

修改元素的class item.classList.add(...)

修改元素的樣式 item.style = '...'

靜態佈局方面的涉及到的知識點有：

transform：這裏主要用到rotate旋轉函數，無論是按鈕的佈局仍是圓形菜單的切換都用到了旋轉

transition ：動畫的過程全都交給這個傢伙準沒錯

border-radius ：想要實現圓環或是圓都離不開圓角

能夠看到這個效果用到的知識點其實並很少，固然了，若是你仍是對這個效果的製做沒有思路，不要緊，能夠觀看下方的詳解版的視頻學習哦

PS：想要看思路分析版視頻的同窗，點擊這裏：

Tom前端特效-果汁混合效果-上（思路分析版）

https://v.qq.com/x/page/l0786...

​
https://v.qq.com/x/page/h0786...

Tom前端特效-果汁混合效果-上（詳解版-1）

https://v.qq.com/x/page/u0786...

Tom前端特效-果汁混合效果-上（詳解版-2）

今天的效果你學會了嗎≖‿≖，若是你有好玩有趣的前端特效，但殊不知道其具體實現原理是什麼，歡迎在下方留言給我，沒準我下次講的特效案例就是你想知道的哦

訂閱號ID：Miaovclass

關注妙味訂閱號：「妙味前端」，爲您帶來優質前端技術乾貨；