我用了css和一点javascript来演示如何生成”汉堡包”动画。
在前面的文章中，我把我对导航栏菜单（也被成为”汉堡包图标”）的动画灵感发布出来。结果收到了不少粉丝的称赞，我先谢谢你们了。
我决定在这方面下多点功夫，于是我写了一系列不同的动画实现方式。在这片文章中，你将会看到6个不同”汉堡包”动画的增强版。
我使用了一点javascript来触发动画，在继续研究下去之前，你可以先看看demo （译者:如果打不开，请点击文章最下面的demo）
变化 我之前写的代码不算太整洁，改变主要目的是让代码更加整洁有序。
首先，我用button元素替换掉了无语意的div。这样代码更具有易读性。
然后我把wrapper的类名命名为.hamburger,在.hamburger里面，我有另外一个元素（一个span标签），我把它的类名定位.icon
精华 我们的.icon元素是被包裹起来构成一个完整的图标。
为了让我们的动画更加平滑，中间的栏需要足够的灵活，因此，.icon元素就用来充当汉堡包的肉饼部分。
至于图标包裹部分，.hamburger不仅仅是充当wrapper的角色，它也用协助完成整个动画。所以汉堡包的上下两块面包的部分就由.hamburger的伪类来填充。
html
正如你所看到的，button元素担任.hamburger角色。另外一个类名（.hamburger-cancel）是用来区分究竟是什么汉堡（板烧鸡腿还是巨无霸什么的）。我们这里有6中不同口味的汉堡。
javascript 正如一开始我说的，我们使用一小段js代码来做切换，下面是我的代码片段
var el = document.queryselectorall('.hamburger');for(i=0; i点击查看demo
本文根据@rahul arora所译，整篇译文带有我自己的理解和意思，如果有译得不好的地方或者不对之处，还请大家指点。如需转载此译文，须注明英文出处：http://w3bits.com/animated-hamburger-icons/