前端特效【第04期】|果汁混合效果-下

往期回顧

在上一期的【前端特效】☜裏，咱們已經把果汁混合的效果裏面的圓形菜單作好了，若是你錯過了上篇文章今天咱們要討論的是杯子裏面的液體生成問題

先來回顧下我們的果汁混合效果吧

果汁混合效果，掃描下方二維碼就看到啦：

咱們接着上期的內容來繼續往下講吧，本期來實現點擊添加不一樣顏色的果汁以及混合的效果吧

其實杯子裏面的液體更多的是用了「障眼法」哦，要作這個效果用到的知識點其實很少。

關鍵的是思路，其實在作特效的時候思路是很是重要的，甚至比你會什麼技能更加劇要

什麼沒思路！？不要緊接下來就讓我來爲小夥伴們拆解下這個效果的解剖圖吧：

若是看圖的不過癮，能夠直接觀看思路拆解介紹的視頻哦： Tom前端特效-果汁混合效果-下(思路版) https://v.qq.com/x/page/d0791ecgrz0.html

經過拆解圖能夠看到圖中的杯子其實被分紅了不少層，分別是透明的杯體、水面、液體以及吸管；

其中杯子、水面和吸管都是圖片，只有液體是用css畫出來的，液體的形狀是一個倒過來的梯形，而且底邊帶有必定的弧度。 如何在瀏覽器上畫梯形呢，用css三角系列知識就能作到的（若是你對邊框三角的知識還不是很瞭解，不要緊，下期我會分享一篇跟其相關的文章，記得關注哦），不過若是還要帶上弧度，那麼就須要border-radius的配合了

因此在這個案例裏面涉及到的知識就再也不是一個單獨的知識點了，而是一系列知識，總結起來分別是：

• 邊框三角形系列知識

• border-radius深度知識

• 僞3D

那什麼是僞3D呢？ 名詞聽着很大氣，其實你們都知道，好比前一段時間很火的3D斑馬線其實就是僞3D。它還有一個*炸天的名字：裸眼3D，是否是以爲很高大上的樣子，其實也還好拉，如圖：

至於如何畫梯形，如何畫帶弧度的梯形？ 怎麼玩這個裸眼3D，如何利用這些知識點來去實現我們果汁效果，你們能夠去下面的視頻講解裏面找答案吧。

https://v.qq.com/x/page/t0791bs0emk.html

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

https://v.qq.com/x/page/l0791rf65it.html

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

另外我每週都會爲你們分析不一樣的前端特效案例原理分析及講解，若是想要了解更多前端特效的具體實現方法，或者想要獲取更多學習資料，能夠在下方留言哦！

分享內容：JavaScript帶你玩轉小遊戲

簡介：

使用JavaScript來建立小遊戲其實很簡單，有一點點基礎就能夠作出來各類可玩性很是高的小遊戲出來。 固然此次帶給你們的也不單單是JS版的遊戲這麼簡單，其中會涉及到一些數據結構與算法的一些知識點、數據驅動視圖的編程思惟，看看這些這些知識點以及思惟是如何運用在小遊戲上的。 此次公開課咱們就給你們帶來兩個比較經典的小遊戲：204八、十滴水。

小遊戲案例展現地址： 遊戲-2048： http://2013.miaov.com/student/llj/2048/2048.html

遊戲-十滴水： http://2013.miaov.com/student/ShiDiShui/index2.html

訂閱號ID：Miaovclass

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