6个Hamburger图标动画

jopen 9年前

我用了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);  } 

总结

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

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

本文根据w3bits.com的《Touch-friendly Animated Hamburger Icons》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://w3bits.com/animated-hamburger-icons/

 6个Hamburger图标动画

HelKyle

我是周晓楷,华南师范大学在校本科生,有轻微强迫症,拖延症,正在努力学习前端知识!微博@Helkyle。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/animated-hamburger-icons.html