往期回顧
在上一期的【前端特效】☜裡，我們已經把果汁混合的效果裡面的圓形選單做好了，如果你錯過了上篇文章今天我們要討論的是杯子裡面的液體生成問題
先來回顧下我們們的果汁混合效果吧
我們接著上期的內容來繼續往下講吧，本期來實現點選新增不同顏色的果汁以及混合的效果吧
其實杯子裡面的液體更多的是用了“障眼法”哦，要做這個效果用到的知識點其實不多。
關鍵的是思路，其實在做特效的時候思路是非常重要的，甚至比你會什麼技能更加重要
什麼沒思路！？沒關係接下來就讓我來為小夥伴們拆解下這個效果的解剖圖吧：
如果看圖的不過癮，可以直接觀看思路拆解介紹的視訊哦：
Tom前端特效-果汁混合效果-下(思路版)
通過拆解圖可以看到圖中的杯子其實被分成了很多層，分別是透明的杯體、水面、液體以及吸管；
其中杯子、水面和吸管都是圖片，只有液體是用css畫出來的，液體的形狀是一個倒過來的梯形，並且底邊帶有一定的弧度。 如何在瀏覽器上畫梯形呢，用css三角系列知識就能做到的（如果你對邊框三角的知識還不是很瞭解，沒關係，下期我會分享一篇跟其相關的文章，記得關注哦），不過如果還要帶上弧度，那麼就需要border-radius的配合了
所以在這個案例裡面涉及到的知識就不再是一個單獨的知識點了，而是一系列知識，總結起來分別是：
- 邊框三角形系列知識
- border-radius深度知識
- 偽3D
那什麼是偽3D呢？ 名詞聽著很大氣，其實大家都知道，比如前一段時間很火的3D斑馬線其實就是偽3D。它還有一個*炸天的名字：裸眼3D，是不是覺得很高大上的樣子，其實也還好拉，如圖：
至於如何畫梯形，如何畫帶弧度的梯形？ 怎麼玩這個裸眼3D，如何利用這些知識點來去實現我們們果汁效果，大家可以去下面的視訊講解裡面找答案吧。
Tom前端特效-果汁混合效果-下（詳解版-1）
Tom前端特效-果汁混合效果-下（詳解版-2）
另外我每週都會為大家分析不同的前端特效案例原理分析及講解，如果想要了解更多前端特效的具體實現方法，或者想要獲取更多學習資料，可以在下方留言哦！
分享內容：JavaScript帶你玩轉小遊戲
簡介：
使用JavaScript來建立小遊戲其實很簡單，有一點點基礎就可以做出來各種可玩性非常高的小遊戲出來。 當然這次帶給大家的也不僅僅是JS版的遊戲這麼簡單，其中會涉及到一些資料結構與演算法的一些知識點、資料驅動檢視的程式設計思維，看看這些這些知識點以及思維是如何運用在小遊戲上的。 這次公開課我們就給大家帶來兩個比較經典的小遊戲：2048、十滴水。
小遊戲案例展示地址：
遊戲-2048： 2013.miaov.com/student/llj…
遊戲-十滴水： 2013.miaov.com/student/Shi…
訂閱號ID：Miaovclass
關注妙味訂閱號：“妙味前端”，為您帶來優質前端技術乾貨；