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

PetitQ 导航菜单 2019-3-15 2.29K 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 特效

已有 572 人购买

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

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

导航菜单

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

HTML 结构

CSS 样式

JavaScript

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

相关文章

纯CSS3黑色气泡背景动画菜单

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

炫酷的动态CSS按钮背景动画样式

发表回复取消回复

热销模板

导航菜单

HTML 结构

CSS 样式

JavaScript

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复