转载

6个Hamburger图标动画

我用了CSS和一点JavaScript来演示如何制作Hamburger 图标动画。

6个Hamburger图标动画

DEMO

在前面的文章中，我把我对导航栏菜单（也被成为"Hamburger图标"）的动画灵感发布出来。结果收到了不少粉丝的称赞，我先谢谢你们了。

我决定在这方面下多点功夫，于是我写了一系列不同的动画实现方式。在这片文章中，你将会看到6个不同"Hamburger"动画的增强版。

我使用了一点JavaScript来触发动画，在继续研究下去之前，你可以先看看 Demo

变化

我之前写的代码不算太整洁，改变主要目的是让代码更加整洁有序。

首先，我用 button 元素替换掉了无语意的 div 。这样代码更具有易读性。

然后我把 wrapper 的类名命名为 .hamburger ,在 .hamburger 里面，我有另外一个元素（一个 span 标签），我把它的类名定位 .icon

精华

我们的 .icon 元素是被包裹起来构成一个完整的图标。

为了让我们的动画更加平滑，中间的栏需要足够的灵活，因此， .icon 元素就用来充当Hamburger部分。

至于图标包裹部分， .hamburger 不仅仅是充当wrapper的角色，它也用协助完成整个动画。所以Hamburger的上下两块部分就由 .hamburger 的伪类来填充。

HTML

<button class="hamburger hamburger-cancel">   <span class="icon"></span> </button>

正如你所看到的， button 元素担任 .hamburger 角色。另外一个类名（ .hamburger-cancel ）是用来区分究竟是什么Hamburger（板烧鸡腿还是巨无霸什么的）。我们这里有6中不同口味的汉堡。

JavaScript

正如一开始我说的，我们使用一小段JS代码来做切换，下面是我的代码片段

var el = document.querySelectorAll('.hamburger'); for(i=0; i<=el.length; i++) {   el[i].addEventListener('click', function() {     this.classList.toggle('active');   }, false); }

上面的JavaScript主要是通过绑定点击时间，把 .active 类添加到对应元素上。

代码

下面的CSS代码设置了我们 hamburger 元素的默认状态。你可以适当调整 font-size ，当然 font-size 最大值不能超出我们的图标

除了结构规范，我们也用了CSS transition 属性来让动画更加平滑。

.hamburger {   font-size: 60px;   display: inline-block;   width: 1em;   height: 1em;   padding: 0;   cursor: pointer;   transition: transform .2s ease-in-out;   vertical-align: middle;   border: 0 none;   background: transparent; } /**  + Button height fix for Firefox  */ .hamburger::-moz-focus-inner {   padding: 0;   border: 0 none; } /**  + Focus fix for Chrome  */ .hamburger:focus {   outline: 0; }

现在，是时候绘制我们的Hamburger图标了。下面的定义可以让我们更清晰地了解整个过程。

顶层面包: hamburger:before
中间奥尔良鸡腿: .icon
底部面包: .hamburger:after

很明显，所有图标的三条杠都有一些共同特性，我们可以把抽出来。

.hamburger:before, .hamburger:after {   content: ""; } .hamburger:before, .hamburger .icon, .hamburger:after {   display: block;   width: 100%;   height: .2em;   margin: 0 0 .2em;   transition: transform .2s ease-in-out;   border-radius: .05em;   background: #596c7d; } /**  + Styles for the active `.hamburger` icon  */ .hamburger.active:before, .hamburger.active .icon, .hamburger.active:after {   background: #2c3e50; }

上面的代码，我们画了三条杠在 .hamburger 里面，给点间隙我们就能清晰地看到汉堡图标了。

为了看上去更圆滑，我们设置了 boder-radius 属性。由于我们的元素都是没有文字的，我们再设置一个背景颜色。

不出意外，我们已经画出一个山东煎饼。让我们继续接下来的动画部分。

动画

6种不同口味的汉堡，我们一一来解析。

Vertical Hamburger

用最简单的方法，要让汉堡旋转，我们只需要在 .active 状态的时候把它旋转 90deg ，或者 270deg 也行，看起来更酷炫一点。

/**  + VERTICAL HAMBURGER  */ .hamburger.hamburger-vertical.active {   transform: rotate(270deg); }

Close/Cancel/Cross

这个图标的做法就仁者见仁智者见者了，做法有很多，我第一个灵感是当中间的肉饼消失的时候，另外两个面包旋转一下，就出来一个 X 形状了。

当然了，为了只是旋转是不够的。旋转的同时还要在 Y 轴上做变化，否则距离有点远。

/**  + CLOSE/CANCEL/CROSS  */ .hamburger.hamburger-cancel.active .icon {   transform: scale(0); } .hamburger.hamburger-cancel.active:before {   transform: translateY(.4em) rotate(135deg); } .hamburger.hamburger-cancel.active:after {   transform: translateY(-.4em) rotate(-135deg); }

Plus

这个动画是这样的：

中间的肉饼消失
上层面包移动并旋转来充当垂直的那一杠
底部的面包移动并旋转来充当水平线

这3个动作就可以完成hamburger到plus的动画了

/**  + PLUS  */ .hamburger.hamburger-plus.active .icon {   transform: scale(0); } .hamburger.hamburger-plus.active:before {   transform: translateY(.4em) rotate(90deg); } .hamburger.hamburger-plus.active:after {   transform: translateY(-.4em) rotate(180deg); }

Minus/Dash

减号的变化是这样的，中间层还是消失不见，其他两块向上向下移动，最终合成一块。然后同样地让他们旋转个 180deg ，这样就很酷炫了~

/**  + MINUS/DASH  */ .hamburger.hamburger-minus.active {   transform: rotate(180deg); } .hamburger.hamburger-minus.active .icon {   transform: scale(0); } .hamburger.hamburger-minus.active:before {   transform: translateY(.4em); } .hamburger.hamburger-minus.active:after {   transform: translateY(-.4em); }

Left Arrow

这个包括了移动，旋转和调整上下两块面包。最后加上一个旋转 180deg

/**  + LEFT ARROW  */ .hamburger.hamburger-arrow-left.active {   transform: rotate(180deg); } .hamburger.hamburger-arrow-left.active:before {   width: .6em;   transform: translateX(.4em) translateY(.2em) rotate(45deg); } .hamburger.hamburger-arrow-left.active .icon {   border-radius: .1em .25em .25em .1em; } .hamburger.hamburger-arrow-left.active:after {   width: .6em;   transform: translateX(.4em) translateY(-.2em) rotate(-45deg); }

Right Arrow

这个就是左箭头的镜面复制了。可以复制左箭头的代码，再做适当变更。

/**  + RIGHT ARROW  */ .hamburger.hamburger-arrow-right.active {   transform: rotate(180deg); } .hamburger.hamburger-arrow-right.active:before {   width: .6em;   transform: translateX(0) translateY(.2em) rotate(-45deg); } .hamburger.hamburger-arrow-right.active .icon {   border-radius: .25em .1em .1em .25em; } .hamburger.hamburger-arrow-right.active:after {   width: .6em;   transform: translateX(0) translateY(-.2em) rotate(45deg); }