6个CSS hamburger动画_html/css_WEB-ITnose

我用了CSS和一点JavaScript来演示如何生成”汉堡包”动画。

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

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

我使用了一点JavaScript来触发动画，在继续研究下去之前，你可以先看看Demo （译者:如果打不开，请点击文章最下面的Demo）

变化

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

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

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

精华

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

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

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

HTML

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

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

垂直

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

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

X/取消

这个图标的做法就仁者见仁智者见者了，做法有很多，我第一个灵感是当中间的肉饼消失的时候，另外两个面包旋转一下，就出来一个’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); }

加号

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

这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); }

减号

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

/** * 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); }

左箭头

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

/** * 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 */.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); }

总结

我在网上找了相似的实现，我发现Sara’s Navicon transformicons很酷，健壮并且更有感染力。

我希望你能喜欢这篇文章，可以在下面分享您的想法和建议。感谢阅读。

http://helkyle.com/demos/hamburger-icons.html’ target=’__blank’>点击查看Demo

本文根据@Rahul Arora所译，整篇译文带有我自己的理解和意思，如果有译得不好的地方或者不对之处，还请大家指点。如需转载此译文，须注明英文出处：http://w3bits.com/animated-hamburger-icons/