jQuery液态式环形按钮菜单_Html Css3环形菜单特效

分享一个jQuery液态式环形按钮菜单的特效、当用户点击主按钮的时候、按钮会像液体一样变形、有一种拖拽的感觉、并分离出3个子菜单按钮、这3个按钮可自定义的、效果图如下、有需要的朋友可以在下面下载Demo

Html代码

<div class="htmleaf-container">
    <div class=´content´>
        <div class=´menu´>
          <div class=´menu-wrapper´>
            <ul class=´menu-items´>
              <li class=´menu-item´>
                <button class=´menu-item-button´>
                  <i class=´fa fa-reply-all´></i>
                </button>
                <div class=´menu-item-bounce´></div>
              </li>
              <li class=´menu-item´>
                <button class=´menu-item-button´>
                  <i class=´fa fa-inbox´></i>
                </button>
                <div class=´menu-item-bounce´></div>
              </li>
              <li class=´menu-item´>
                <button class=´menu-item-button´>
                  <i class=´fa fa-trash´></i>
                </button>
                <div class=´menu-item-bounce´></div>
              </li>
            </ul>
            <button class=´menu-toggle-button´>
              <i class=´fa fa-plus menu-toggle-icon´></i>
            </button>
          </div>
        </div>
    </div>
</div>

打开菜单的JavaScript代码

function openMenu(){
    $(".menu-item").each(function(i){
        var delay=i*0.08;

        var $bounce=$(this).children(".menu-item-bounce");

        TweenMax.fromTo($bounce,0.2,{
            transformOrigin:"50% 50%"
        },{
            delay:delay,
            scaleX:0.8,
            scaleY:1.2,
            force3D:true,
            ease:Quad.easeInOut,
            onComplete:function(){
                TweenMax.to($bounce,0.15,{
                    // scaleX:1.2,
                    scaleY:0.7,
                    force3D:true,
                    ease:Quad.easeInOut,
                    onComplete:function(){
                        TweenMax.to($bounce,3,{
                            // scaleX:1,
                            scaleY:0.8,
                            force3D:true,
                            ease:Elastic.easeOut,
                            easeParams:[1.1,0.12]
                        })
                    }
                })
            }
        });

        TweenMax.to($(this).children(".menu-item-button"),0.5,{
            delay:delay,
            y:distance,
            force3D:true,
            ease:Quint.easeInOut
        });
    })
}

jQuery液态式环形按钮菜单特效源代码下载链接: 液态拖拽按钮菜单 密码: dd5g