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

往期回顾

在上一期的【前端特效】☜里，咱们已经把果汁混合的效果里面的圆形菜单作好了，若是你错过了上篇文章今天咱们要讨论的是杯子里面的液体生成问题

先来回顾下我们的果汁混合效果吧

果汁混合效果，扫描下方二维码就看到啦：

咱们接着上期的内容来继续往下讲吧，本期来实现点击添加不一样颜色的果汁以及混合的效果吧

其实杯子里面的液体更多的是用了“障眼法”哦，要作这个效果用到的知识点其实很少。
关键的是思路，其实在作特效的时候思路是很是重要的，甚至比你会什么技能更加剧要
什么没思路！？不要紧接下来就让我来为小伙伴们拆解下这个效果的解剖图吧：

若是看图的不过瘾，能够直接观看思路拆解介绍的视频哦：

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版的游戏这么简单，其中会涉及到一些数据结构与算法的一些知识点、数据驱动视图的编程思惟，看看这些这些知识点以及思惟是如何运用在小游戏上的。

此次公开课咱们就给你们带来两个比较经典的小游戏：204八、十滴水。
小游戏案例展现地址：

游戏-2048：
http://2013.miaov.com/student...

游戏-十滴水：
http://2013.miaov.com/student...

订阅号ID：Miaovclass

关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；