CSS3超炫汉堡包变形动画jQuery特效

PetitQ 导航菜单 2019-3-15 2.26K 0 0

这是一款使用 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();
```
```
    }
```
```
  });
```
```
});
```

CSS3 超炫汉堡包变形动画 jQuery 特效

已有 565 人购买

永久更新：
演示数据：
提取码：sf39

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

CSS3超炫汉堡包变形动画jQuery特效

HTML 结构

CSS 样式

JavaScript

CSS3 超炫汉堡包变形动画 jQuery 特效

相关文章

纯CSS3列表面板导航设计效果

CSS3显示/隐藏侧边栏效果

纯CSS3单页切换导航菜单界面设计

发表回复取消回复

热销模板

导航菜单

HTML 结构

CSS 样式

JavaScript

CSS3 超炫汉堡包变形动画 jQuery 特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复