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

2018-11-09 admin

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

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

先上图看看卡哇伊的设计: 图片描述

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

图片描述

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

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

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

最后点击图标的时候去旋转下面的圆形元素就可以得到效果了。当然这部分要涉及到一点点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/l0786…

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

Tom前端特效-果汁混合效果-上(详解版-1)

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

Tom前端特效-果汁混合效果-上(详解版-2)

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

订阅号ID:Miaovclass

关注妙味订阅号:“妙味前端”,为您带来优质前端技术干货;

原文链接:https://segmentfault.com/a/1190000016958888

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44961.html

文章标题:前端特效【第03期】|果汁混合效果-上

相关文章
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
回到顶部