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

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

这种要求我向来是不会拒绝的，因而就有了今天的案例。一样，你们之后若是有什么想要了解的效果的话，也能够在下方留言给我，说不定个人下一个视频讲解就是你想要的案例哦...

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

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

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

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

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

最后点击图标的时候去旋转下面的圆形元素就能够获得效果了。固然这部分要涉及到一点点js的基础，因此若是对js基础还不够了解的同窗的话呢建议先去看看妙味的JS基础视频哦。

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

获取元素                querySelector、querySelectorAll

for循环                  for(var i=0;i<item.length;i++){...}

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

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

修改元素的样式       item.style = '...'
复制代码

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

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

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

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

能够看到这个效果用到的知识点其实并很少，固然了，若是你仍是对这个效果的制做没有思路，不要紧，能够观看下方的详解版的视频学习哦

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

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

v.qq.com/x/page/l078…

​

v.qq.com/x/page/h078…

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

v.qq.com/x/page/u078…

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

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

订阅号ID：Miaovclass

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