导航菜单

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

创客主机

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

HTML 结构

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

也想出现在这里?联系我们
WordPress 主题
  1. <div class='container'>
  2.   <div class='burger'>
  3.     <div class='burger__line-top'></div>
  4.     <div class='burger__line-mid'></div>
  5.     <div class='burger__menu'>
  6.       <p>MENU</p>
  7.     </div>
  8.   </div>
  9. </div>

CSS 样式

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

  1. .burger {
  2.   position: absolute;
  3.   left: 0;
  4.   right: 0;
  5.   top: 0;
  6.   bottom: 0;
  7.   margin: auto;
  8.   width: 71px;
  9.   height: 71px;
  10.   cursor: pointer;
  11. }
  12. .burger__line-top {
  13.   width: 100%;
  14.   height: 8px;
  15.   border-radius: 5px;
  16.   background-color: #fff;
  17.   box-shadow: 0 0 1px 0 #fff;
  18. }
  19. .burger__line-mid {
  20.   margin-top: 17px;
  21.   width: 100%;
  22.   height: 8px;
  23.   border-radius: 5px;
  24.   background-color: #fff;
  25.   box-shadow: 0 0 1px 0 #fff;
  26. }
  27. .burger__menu {
  28.   margin-top: 10px;
  29. }
  30. .burger__menu p {
  31.   text-align: center;
  32.   font-size: 20px;
  33.   font-family: 'Open Sans', sans-serif;
  34.   font-weight: 900;
  35.   color: #fff;
  36.   text-shadow: 0 0 1px #fff;
  37.   letter-spacing: 3px;
  38. }

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

JavaScript

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

  1. 'use strict';
  2. $(document).ready(function () {
  3.   var $burger = $('.burger'),
  4.       $topLine = $('.burger__line-top'),
  5.       $midLine = $('.burger__line-mid'),
  6.       $menuLine = $('.burger__menu'),
  7.       anim = false;
  8.  
  9.   var changeClasses = {
  10.     addActive: function addActive() {
  11.       for (var i = 0; i <= 2; i++) {
  12.         $burger.children().eq(i).removeClass('reverseLine' + (i + 1)).addClass('activeLine' + (i + 1));
  13.       }
  14.     },
  15.     addReverse: function addReverse() {
  16.       for (var i = 0; i <= 2; i++) {
  17.         $burger.children().eq(i).removeClass('activeLine' + (i + 1)).addClass('reverseLine' + (i + 1));
  18.       }
  19.     }
  20.   };
  21.  
  22.   var timeouts = {
  23.     initial: function initial(child, Y, rot, scale) {
  24.       $burger.children().eq(child).css('transform', 'translateY(' + Y + 'px) rotate(' + rot + 'deg) scale(' + scale + ',1)');
  25.     },
  26.     afterActive: function afterActive() {
  27.       var _this = this;
  28.  
  29.       // ES6
  30.       setTimeout(function () {
  31.         _this.initial(0, 12, 45, 1.40);
  32.         _this.initial(1, -12, -45, 1.40);
  33.         _this.initial(2, 35, 0, 1);
  34.         $burger.children().eq(2).css('opacity', '0');
  35.         anim = true;
  36.       }, 1300);
  37.     },
  38.     beforeReverse: function beforeReverse() {
  39.       var _this2 = this;
  40.  
  41.       setTimeout(function () {
  42.         for (var i = 0; i <= 2; i++) {
  43.           _this2.initial(i, 0, 0, 1);
  44.         }
  45.         $burger.children().eq(2).css('opacity', '1');
  46.         anim = false;
  47.       }, 1300);
  48.     }
  49.   };
  50.  
  51.   $burger.on('click', function () {
  52.     if (!anim) {
  53.       changeClasses.addActive();
  54.       timeouts.afterActive();
  55.     } else if (anim) {
  56.       changeClasses.addReverse();
  57.       timeouts.beforeReverse();
  58.     }
  59.   });
  60. });
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!