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

WelliJhon 发布于2019-08-23 12:59 / 1641人阅读

摘要：前几天有一个热心的小伙伴找到我说，我看到一个很好看的效果，可不可以讲讲这种要求我向来是不会拒绝的，于是就有了今天的案例。

前几天有一个热心的小伙伴找到我说，我看到一个很好看的效果，可不可以讲讲？

这种要求我向来是不会拒绝的，于是就有了今天的案例。同样，大家以后如果有什么想要了解的效果的话，也可以在下方留言给我，说不定我的下一个视频讲解就是你想要的案例哦...

先上图看看卡哇伊的设计：

当然光看静图没什么意思，想要看最终效果的话，扫描下方二维码就看到啦：

可能对于刚刚接触前端不久的小伙伴来说，效果稍微复杂了一点点，没关系我会把这个效果分成了两篇文章来去讲解，今天要讲的是下面的圆形菜单的效果的具体实现方法；

正式开讲前，让我们先把它拆开来看看，这样有便于我们更好的理清思路

如上图所示，拆开了之后就可以发现下面的菜单其实就是一个圆上面定位放了几个图标，这些图标分别有它自身的父级，父级通过旋转一定的角度就能得到一个扇形的效果了。

最后点击图标的时候去旋转下面的圆形元素就可以得到效果了。当然这部分要涉及到一点点js的基础，所以如果对js基础还不够了解的同学的话呢建议先去看看妙味的JS基础视频哦。

JS动画涉及到的知识点有：

获取元素 querySelector、querySelectorAll

for循环 for(var i=0;i

添加点击事件 item.onclick = function(){...}

修改元素的class item.classList.add(...)

修改元素的样式 item.style = "..."

静态布局方面的涉及到的知识点有：

transform：这里主要用到rotate旋转函数，不管是按钮的布局还是圆形菜单的切换都用到了旋转

transition ：动画的过程全都交给这个家伙准没错

border-radius ：想要实现圆环或是圆都离不开圆角

可以看到这个效果用到的知识点其实并不多，当然了，如果你还是对这个效果的制作没有思路，没关系，可以观看下方的详解版的视频学习哦

PS：想要看思路分析版视频的同学，点击这里：

Tom前端特效-果汁混合效果-上（思路分析版）

https://v.qq.com/x/page/l0786...

https://v.qq.com/x/page/h0786...

Tom前端特效-果汁混合效果-上（详解版-1）

https://v.qq.com/x/page/u0786...

Tom前端特效-果汁混合效果-上（详解版-2）

今天的效果你学会了吗≖‿≖，如果你有好玩有趣的前端特效，但却不知道其具体实现原理是什么，欢迎在下方留言给我，没准我下次讲的特效案例就是你想知道的哦

订阅号ID：Miaovclass

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

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

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

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

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

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

宋华 2019-08-26 12:22 评论0 收藏0
2017-07-03 前端日报

摘要：前端日报精选使用可变数据结构知乎专栏我接触过的前端数据结构与算法人人网博客基于指令和混合的前端通用埋点方案知乎专栏的数据依赖实现原理简析从到掘金中文第期升级指南译是什么鬼知乎专栏异步编程之每日技术笔记的个特性以及对的展 2017-07-03 前端日报精选 Redux 使用可变数据结构 - 知乎专栏我接触过的前端数据结构与算法 – 人人网FED博客基于指令和混合的前端通用埋点方案 - ...

animabear 2019-08-20 17:42 评论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