前端特效【第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前端特效-果汁混合效果-上（思路分析版）

https://v.qq.com/x/page/l0786x6roz2.html

https://v.qq.com/x/page/h0786v5zc33.html

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

https://v.qq.com/x/page/u0786w4xt90.html

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

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

订阅号ID：Miaovclass

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

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

前端特效【第04期】|果汁混合效果-下
2019独角兽企业重金招聘Python工程师标准>>> 往期回顾在上一期的[前端特效]☜里,我们已经把果汁混合的效果里面的圆形菜单做好了,如果你错过了上篇文章今天我们要讨论的是杯子 ...
推荐八款来自极客标签的超棒前端特效[第八期]
为什么80%的码农都做不了架构师?>>> 日期:2013-6-24 来源:GBin1.com 本周,我们带来了极客社区推荐的10款前端特效,非常有趣的小游戏和页面生成.希望可 ...
推荐10款来自极客标签的超棒前端特效[第五期]
来源:GBin1.com 本周推荐的10款来自极客社区的前端特效!希望大家会喜欢! 使用CSS实现网格矩阵多维体效果用鼠标触动旋转魔方,会将其转化为立体模式旋转. GBdebug在线调试地址:htt ...
推荐十款来自极客标签的超棒前端特效[第十期]
日期:2013-7-15 来源:GBin1.com 本周,我们带来了极客社区推荐的10款前端特效,仍然是非常有趣的小动态效果的页面生成.喜欢的可以直接将我们的在线调试代码插入,希望可以带给大家一些更 ...
H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能效果展示源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
数字医疗产业论坛丨03期沪贵云上
" 开源是未来数字化转型的一个方向,我们要久久为功,以长远的眼光,发挥开源人的协作精神,通过联合产业沙龙,广泛整合资源,进一步推动医疗数字化转型. Mon. October 24, 20 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个复古手机键盘（带声音）的动画效果~~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!D ...

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

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

最新文章

热门文章