这是一款使用jQuery和CSS3来制作的炫酷汉堡包变形动画特效。该特效通过通过jQuery来附加按钮事件，并通过CSS3 transform和animation来制作动画特效。

使用方法

HTML结构

该汉堡包变形动画特效的HTML结构如下：

<div class='container'>
  <div class='burger'>
    <div class='burger__line-top'></div>
    <div class='burger__line-mid'></div>
    <div class='burger__menu'>
      <p>MENU</p>
    </div>
  </div>
</div>
                

CSS样式

汉堡包菜单按钮的基本样式如下：

.burger {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 71px;
  height: 71px;
  cursor: pointer;
}
.burger__line-top {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 1px 0 #fff;
}
.burger__line-mid {
  margin-top: 17px;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 1px 0 #fff;
}
.burger__menu {
  margin-top: 10px;
}
.burger__menu p {
  text-align: center;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 1px #fff;
  letter-spacing: 3px;
}
                

在样式中使用了6个animation动画：activeTop、activeMid、activeMenu、reverseTop、reverseMid和reverseMenu。分别用于汉堡包按钮的变形和返回初始状态。

JavaScript

该特效使用jQuery代码来为相应的元素添加和移除相应的class类，并为汉堡包按钮绑定鼠标点击事件。

'use strict';
$(document).ready(function () {
  var $burger = $('.burger'),
      $topLine = $('.burger__line-top'),
      $midLine = $('.burger__line-mid'),
      $menuLine = $('.burger__menu'),
      anim = false;

  var changeClasses = {
    addActive: function addActive() {
      for (var i = 0; i <= 2;="" i++)="" {="" $burger.children().eq(i).removeclass('reverseline'="" +="" (i="" +="" 1)).addclass('activeline'="" +="" (i="" +="" 1));="" }="" },="" addreverse:="" function="" addreverse()="" {="" for="" (var="" i="0;" i=""><= 2;="" i++)="" {="" $burger.children().eq(i).removeclass('activeline'="" +="" (i="" +="" 1)).addclass('reverseline'="" +="" (i="" +="" 1));="" }="" }="" };="" var="" timeouts="{" initial:="" function="" initial(child,="" y,="" rot,="" scale)="" {="" $burger.children().eq(child).css('transform',="" 'translatey('="" +="" y="" +="" 'px)="" rotate('="" +="" rot="" +="" 'deg)="" scale('="" +="" scale="" +="" ',1)');="" },="" afteractive:="" function="" afteractive()="" {="" var="" _this="this;" es6="" settimeout(function="" ()="" {="" _this.initial(0,="" 12,="" 45,="" 1.40);="" _this.initial(1,="" -12,="" -45,="" 1.40);="" _this.initial(2,="" 35,="" 0,="" 1);="" $burger.children().eq(2).css('opacity',="" '0');="" anim="true;" },="" 1300);="" },="" beforereverse:="" function="" beforereverse()="" {="" var="" _this2="this;" settimeout(function="" ()="" {="" for="" (var="" i="0;" i=""><= 2;="" i++)="" {="" _this2.initial(i,="" 0,="" 0,="" 1);="" }="" $burger.children().eq(2).css('opacity',="" '1');="" anim="false;" },="" 1300);="" }="" };="" $burger.on('click',="" function="" ()="" {="" if="" (!anim)="" {="" changeclasses.addactive();="" timeouts.afteractive();="" }="" else="" if="" (anim)="" {="" changeclasses.addreverse();="" timeouts.beforereverse();="" }="" });="" });="">

在线预览    源码下载