今天来看个好玩的东西,一个有果冻效果的导航栏:

果冻效果的导航栏 gif 果冻效果的导航栏

主要思路

这个主要是在移动框的前面和后面加了一个可变大小的椭圆:

background Layer 1

这样还看不出来,当加上颜色之后,我们可以发现如下:

background Layer 1

两边圆的颜色是互斥的,左边圆背景为黑色(导航栏背景也为黑色,因此看不到左边的圆,因此左边看上去像少了一块),右边的圆背景为红色(因为方块的颜色也是红色,因此右边看上去像方块多了一块)。

大致搞懂了一个的话,我们看看一个完整的变化过程:

background Layer 1 右红左黑(幅度大) 左右圆宽度变成0 颜色对调,左红右黑(幅度小) 左右圆宽度变成0

其实主要的就是左右两个圆的大小和颜色变化,使我们产生一种这样的错觉,代码上我们主要用jquery的queue来实现一个动画队列,这样是为了方便可以自定义动画的时间,例如,如果两个距离比较远,那么抖动的幅度更大,时间稍长一点,关键代码如下:

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字