資訊專欄INFORMATION COLUMN
摘要：往期回顧在上一期的前端特效里，我們已經把果汁混合的效果里面的圓形菜單做好了，如果你錯過了上篇文章今天我們要討論的是杯子里面的液體生成問題先來回顧下咱們的果汁混合效果吧果汁混合效果，掃描下方二維碼就看到啦我們接著上期的內容來繼續往下講吧，本期
往期回顧
在上一期的【前端特效】?里，我們已經把果汁混合的效果里面的圓形菜單做好了，如果你錯過了上篇文章今天我們要討論的是杯子里面的液體生成問題
先來回顧下咱們的果汁混合效果吧
果汁混合效果，掃描下方二維碼就看到啦：
我們接著上期的內容來繼續往下講吧，本期來實現點擊添加不同顏色的果汁以及混合的效果吧
其實杯子里面的液體更多的是用了“障眼法”哦，要做這個效果用到的知識點其實不多。
關鍵的是思路，其實在做特效的時候思路是非常重要的，甚至比你會什么技能更加重要
什么沒思路！？沒關系接下來就讓我來為小伙伴們拆解下這個效果的解剖圖吧：
如果看圖的不過癮，可以直接觀看思路拆解介紹的視頻哦：
Tom前端特效-果汁混合效果-下(思路版)
https://v.qq.com/x/page/d0791...
通過拆解圖可以看到圖中的杯子其實被分成了很多層，分別是透明的杯體、水面、液體以及吸管；
其中杯子、水面和吸管都是圖片，只有液體是用css畫出來的，液體的形狀是一個倒過來的梯形，并且底邊帶有一定的弧度。
如何在瀏覽器上畫梯形呢，用css三角系列知識就能做到的（如果你對邊框三角的知識還不是很了解，沒關系，下期我會分享一篇跟其相關的文章，記得關注哦），不過如果還要帶上弧度，那么就需要border-radius的配合了
所以在這個案例里面涉及到的知識就不再是一個多帶帶的知識點了，而是一系列知識，總結起來分別是：
邊框三角形系列知識
border-radius深度知識
偽3D
那什么是偽3D呢？ 名詞聽著很大氣，其實大家都知道，比如前一段時間很火的3D斑馬線其實就是偽3D。它還有一個*炸天的名字：裸眼3D，是不是覺得很高大上的樣子，其實也還好拉，如圖：
至于如何畫梯形，如何畫帶弧度的梯形？ 怎么玩這個裸眼3D，如何利用這些知識點來去實現咱們果汁效果，大家可以去下面的視頻講解里面找答案吧。
https://v.qq.com/x/page/t0791...
Tom前端特效-果汁混合效果-下（詳解版-1）
https://v.qq.com/x/page/l0791...
Tom前端特效-果汁混合效果-下（詳解版-2）
另外我每周都會為大家分析不同的前端特效案例原理分析及講解，如果想要了解更多前端特效的具體實現方法，或者想要獲取更多學習資料，可以在下方留言哦！
分享內容：JavaScript帶你玩轉小游戲
簡介：
使用JavaScript來創建小游戲其實很簡單，有一點點基礎就可以做出來各種可玩性非常高的小游戲出來。
當然這次帶給大家的也不僅僅是JS版的游戲這么簡單，其中會涉及到一些數據結構與算法的一些知識點、數據驅動視圖的編程思維，看看這些這些知識點以及思維是如何運用在小游戲上的。
這次公開課我們就給大家帶來兩個比較經典的小游戲：2048、十滴水。
小游戲案例展示地址：
游戲-2048：
http://2013.miaov.com/student...
游戲-十滴水：
http://2013.miaov.com/student...
訂閱號ID：Miaovclass
關注妙味訂閱號：“妙味前端”，為您帶來優質前端技術干貨；
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108566.html
摘要：前幾天有一個熱心的小伙伴找到我說，我看到一個很好看的效果，可不可以講講這種要求我向來是不會拒絕的，于是就有了今天的案例。 前幾天有一個熱心的小伙伴找到我說，我看到一個很好看的效果，可不可以講講？ 這種要求我向來是不會拒絕的，于是就有了今天的案例。同樣，大家以后如果有什么想要了解的效果的話，也可以在下方留言給我，說不定我的下一個視頻講解就是你想要的案例哦... 先上圖看看卡哇伊的設計：s...
摘要：接下來本清單還列舉了對于接入過濾與防攻擊使用合適的方法并且對用戶輸入進行有效校驗避免關鍵資源外泄設置合理的響應頭等等內容。該論文的主要論點是，沒有任何一項技術或方法可以能讓軟件工程的生產力在十年內提高十倍。 推薦 1. Styled-Components 實戰 https://hackernoon.com/styled... Styled-Components 是由 Max Stoib...
摘要：接下來本清單還列舉了對于接入過濾與防攻擊使用合適的方法并且對用戶輸入進行有效校驗避免關鍵資源外泄設置合理的響應頭等等內容。該論文的主要論點是，沒有任何一項技術或方法可以能讓軟件工程的生產力在十年內提高十倍。 推薦 1. Styled-Components 實戰 https://hackernoon.com/styled... Styled-Components 是由 Max Stoib...
閱讀 3105·2021-11-18 10:02
閱讀 2617·2021-10-13 09:47
閱讀 3034·2021-09-22 15:07
閱讀 791·2019-08-30 15:43
閱讀 1810·2019-08-30 10:59
閱讀 1684·2019-08-29 15:34
閱讀 1702·2019-08-29 15:06
閱讀 438·2019-08-29 13:28
