这是一款效果非常炫酷的液态环形按钮菜单jQuery特效。该特效使用GSAP来制作圆形按钮的变形动画，当用户点击主按钮时，按钮会像液体一样变形，并分离出3个子菜单按钮。

使用方法

使用该液态环形按钮菜单特效需要在页面中引入jQuery和TweenMax.min.js以及font-awesome字体图标文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
HTML结构

该液态环形按钮菜单的HTML结构非常简单，子菜单使用的是一个无序列表，每个列表项中是一个按钮元素以及一个用于制作弹性效果的div层。主菜单按钮就是一个按钮元素。

<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>
CSS样式

为菜单添加下面的一些简单的CSS样式。

.menu {
  width: 300px;
  height: 200px;
  margin: 0 auto 100px;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.menu-wrapper {
  position: absolute;
  left: 50%;
  bottom: 10px;
}
.menu-toggle-button, .menu-item-bounce, .menu-item-button {
  background: #4f4f64;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  height: 80px;
  color: #fff;
  border: none;
  outline: none;
  position: relative;
}
.menu-toggle-button {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.menu-toggle-icon {
  font-size: 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.menu-items {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.menu-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.menu-item-bounce {
  position: absolute;
  top: 0;
  left: 0;
}
.menu-item-button {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  position: absolute;
  top: 0;
  left: 0;
  color: #AD4C4C;
}
.menu-item-button .fa {
  font-size: 1.5rem;
  color: #fff;
}
.menu-item-button .fa-inbox {
  transform: rotate(182deg);
}
.menu-item-button .fa-reply-all {
  transform: rotate(-120deg);
}
.menu-item-button .fa-trash {
  transform: rotate(120deg);
}
JavaScript

该液态环形按钮菜单使用GSAP来制作按钮的动画效果。其中openMenu()函数为打开菜单，closeMenu()函数为关闭菜单。

$(document).ready(function(){
      var menuItemNum=$(".menu-item").length;
      var angle=120;
      var distance=90;
      var startingAngle=180+(-angle/2);
      var slice=angle/(menuItemNum-1);
      TweenMax.globalTimeScale(0.8);
      $(".menu-item").each(function(i){
        var angle=startingAngle+(slice*i);
        $(this).css({
          transform:"rotate("+(angle)+"deg)"
        })
        $(this).find(".menu-item-icon").css({
          transform:"rotate("+(-angle)+"deg)"
        })
      })
      var on=false;

      $(".menu-toggle-button").mousedown(function(){
        TweenMax.to($(".menu-toggle-icon"),0.1,{
          scale:0.65
        })
      })
      $(document).mouseup(function(){
        TweenMax.to($(".menu-toggle-icon"),0.1,{
          scale:1
        })
      });
      $(document).on("touchend",function(){
        $(document).trigger("mouseup")
      })
      $(".menu-toggle-button").on("mousedown",pressHandler);
      $(".menu-toggle-button").on("touchstart",function(event){
        $(this).trigger("mousedown");
        event.preventDefault();
        event.stopPropagation();
      });

      function pressHandler(event){
        on=!on;

        TweenMax.to($(this).children('.menu-toggle-icon'),0.4,{
          rotation:on?45:0,
          ease:Quint.easeInOut,
          force3D:true
        });

        on?openMenu():closeMenu();
        
      }
      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
          });
        })
      }
      function closeMenu(){
        $(".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:1,
            scaleY:0.8,
            force3D:true,
            ease:Quad.easeInOut,
            onComplete:function(){
              TweenMax.to($bounce,0.15,{
                // scaleX:1.2,
                scaleY:1.2,
                force3D:true,
                ease:Quad.easeInOut,
                onComplete:function(){
                  TweenMax.to($bounce,3,{
                    // scaleX:1,
                    scaleY:1,
                    force3D:true,
                    ease:Elastic.easeOut,
                    easeParams:[1.1,0.12]
                  })
                }
              })
            }
          });
          TweenMax.to($(this).children(".menu-item-button"),0.3,{
            delay:delay,
            y:0,
            force3D:true,
            ease:Quint.easeIn
          });
        })
    }
})