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

宋华发布于2019-08-26 12:22 / 3430人阅读

摘要：往期回顾在上一期的前端特效里，我们已经把果汁混合的效果里面的圆形菜单做好了，如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题先来回顾下咱们的果汁混合效果吧果汁混合效果，扫描下方二维码就看到啦我们接着上期的内容来继续往下讲吧，本期

往期回顾

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

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

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

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

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

如果看图的不过瘾，可以直接观看思路拆解介绍的视频哦：

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

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

云服务器 GPU云服务器《HelloGitHub》第 67 期《HelloGitHub》第 65 期独立开发变现周刊（第 17 期）：为了活独立开发变现周刊（第25期）：免费表单生

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108566.html

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

摘要：前几天有一个热心的小伙伴找到我说，我看到一个很好看的效果，可不可以讲讲这种要求我向来是不会拒绝的，于是就有了今天的案例。前几天有一个热心的小伙伴找到我说，我看到一个很好看的效果，可不可以讲讲？这种要求我向来是不会拒绝的，于是就有了今天的案例。同样，大家以后如果有什么想要了解的效果的话，也可以在下方留言给我，说不定我的下一个视频讲解就是你想要的案例哦... 先上图看看卡哇伊的设计：s...

WelliJhon 2019-08-23 12:59 评论0 收藏0
阿里云前端周刊 - 第 17 期

摘要：接下来本清单还列举了对于接入过滤与防攻击使用合适的方法并且对用户输入进行有效校验避免关键资源外泄设置合理的响应头等等内容。该论文的主要论点是，没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍。推荐 1. Styled-Components 实战 https://hackernoon.com/styled... Styled-Components 是由 Max Stoib...

bingo 2019-08-21 16:03 评论0 收藏0
阿里云前端周刊 - 第 17 期

摘要：接下来本清单还列举了对于接入过滤与防攻击使用合适的方法并且对用户输入进行有效校验避免关键资源外泄设置合理的响应头等等内容。该论文的主要论点是，没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍。推荐 1. Styled-Components 实战 https://hackernoon.com/styled... Styled-Components 是由 Max Stoib...

gityuan 2019-08-29 13:00 评论0 收藏0