6个CSS hamburger动画

我用了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/

译文出处:http://helkyle.com/2015/05/19/animated-hamburger-icons/

时间: 2024-11-05 13:32:59

6个CSS hamburger动画的相关文章

如何使用JavaScript控制CSS Animations(动画)和Transitions(过渡)

Zach邮件跟我说,上Stack Overflow这类的论坛,他经常碰到一些关于JavaScript控制CSS 动画的问题,又提供给我几个例子.我很久就打算写一些关于这方面的文章,所以很高兴让Zach提出来并促使我写了这个教程. 有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解.虽然CSS动画有其局限性,但它的性能比大多数JavaScript库更加高效,因为它可以借助硬件加速啊!其效果绝对可以超出我们的预期. CSS animations和transitions再加上点J

css实现动画功能

在CSS中动画功能其实可以说是很强大的,在网页中加载速度很快,他的功能特效可以一千变万化,做不到只有想不到的,当然前提是你要掌握在CSS3上面的各种标签,今天带来了我在课程练习中的动画的3D动态旋转.代码如下:    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

基于animation.css实现动画旋转特效

分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="mod_bg"> <div class="bg1"></div> <div class="bg2"></div> <

第四十二课:基于CSS的动画引擎

由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript的动画引擎. 首先,我们看一下判定条件,方便切换.前面说过,浏览器把所有事件类型的构造器放在window上,只不过不可遍历.我们用Object.getOwnPropertyNames(window),可以得到window对象中的所有属性,然后再filter一下,就能得到所有的事件构造器了.最后,我们

css的动画

css的动画是作用于div,给div加css动画  例如div旋转动画 css部分 .zhuan1{ /*动画名字为转1 0.3秒一次 执行一次 停止*/ animation:zhuan1 0.3s ease both; /*等待0s开始*/ animation-delay:0s; /*过程匀速进行*/ animation-timing-function: linear; } /*转动画 0%的时候执行角度为0deg 100%执行角度为180deg*/ @-webkit-keyframes zh

CSS波纹动画

波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3).后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实

css的动画和过渡

一.过渡: transition    简写属性,用于在一个属性中设置四个过渡属性. transition-property   规定应用过渡的 CSS 属性的名称. transition-duration    定义过渡效果花费的时间.默认是 0. transition-timing-function   规定过渡效果的时间曲线.默认是 "ease". transition-delay         规定过渡效果何时开始.默认是 0. eg: div { transition: w

CSS过渡动画之transition

O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比较学术的定义:transition主要负责页面的过渡效果,transition可以使css的属性值在一定时间内平滑地过渡.这种效果可以在鼠标划过.点击.获得焦点或者对元素的任何改变中触发,并平滑地以动画效果改变css的属性值. transition的几个常用属性 1.transition-prope

CSS--使用Animate.css制作动画效果

一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHu