HTML+CSS+JS 实现图标旋转效果

一组动画css-only汉堡菜单切换开关,转换时点击代表积极(或菜单打开)状态。

简介

汉堡菜单图标已成为许多网站和web应用程序的一种主食,你是否喜欢他们,他们越来越熟悉和可辨认的UI操作按钮。用户将这个图标与菜单的显示和隐藏,和它的紧凑,节省空间的性质使其成为理想的风格,特别是在较小的屏幕。过去,你可能已经创建或下载一个图标,把它放到你的文档。这是不错,如果你使用 image sprites,那么这将是一个非常简单的实现。

然而今天我们将讲解是是怎样只使用CSS来实现这个著名的汉堡菜单图标。随着手机移动端的体验和交换式网页的动画时代的来临，设计的规范重新兴起，比如Google的设计，用户更多的期望交互式的体验。我们将为图标创造一些精致巧妙的动画，表示他们是可交互的，或者你可以想象这个菜单是可以打开的。这将会使用到极少的js代码。

HTML代码

我们将展示4中示例。对于每种按钮的装饰效果是类似的，每种按钮都有一个共同的class和一个唯一标示的class。每个按钮都是有一个button表情的父元素和一个span表情的内联元素构成。button标签作为容器，可以让我们添加padding和背景。如下面的代码

  toggle menu



  toggle menu



  toggle menu



  toggle menu

CSS代码

开始我们会重置按钮的样式，让它没有阴影，边框，默认设置为可见的。我们给按钮定义长和宽（对于动画的部分会用到）。我们需要把文字隐藏了，所以css代码如下：

.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 96px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.c-hamburger:focus {
  outline: none;
}

下面我们需要定义Hamburger图标了

.c-hamburger span {
  display: block;
  position: absolute;
  top: 44px;
  left: 18px;
  right: 18px;
  height: 8px;
  background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -20px;
}

.c-hamburger span::after {
  bottom: -20px;
}

样式一： Rotating Icon

这个是最简单的图表，我们只需要设置active

.c-hamburger--rot {
  background-color: #28aadc;
}

.c-hamburger--rot span {
  transition: transform 0.3s;
}

/* active state, i.e. menu open */
.c-hamburger--rot.is-active {
  background-color: #166888;
}

.c-hamburger--rot.is-active span {
  transform: rotate(90deg);
}

样式二：Animate To “X”

这个版本的汉堡图标启动一个“x”通过移动bars顶部和底部的垂直居中图标,然后旋转。我们想要转换“x”发生在顶部和底部的bars搬到中间,

我们用转换延迟实现整体效果。

.c-hamburger--htx {
  background-color: #ff3264;
}

.c-hamburger--htx span {
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #cb0032;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}

样式三：Animate To Left-Pointing Arrow

在这个版本的图标,整件事旋转180度,顶部和底部bars动画形成一只左向箭头。

.c-hamburger--htla {
  background-color: #32dc64;
}

.c-hamburger--htla span {
  transition: transform 0.3s;
}

.c-hamburger--htla span::before {
  transform-origin: top right;
  transition: transform 0.3s, width 0.3s, top 0.3s;
}

.c-hamburger--htla span::after {
  transform-origin: bottom right;
  transition: transform 0.3s, width 0.3s, bottom 0.3s;
}

/* active state, i.e. menu open */
.c-hamburger--htla.is-active {
  background-color: #18903c;
}

.c-hamburger--htla.is-active span {
  transform: rotate(180deg);
}

.c-hamburger--htla.is-active span::before,
.c-hamburger--htla.is-active span::after {
  width: 50%;
}

.c-hamburger--htla.is-active span::before {
  top: 0;
  transform: translateX(38px) translateY(4px) rotate(45deg);
}

.c-hamburger--htla.is-active span::after {
  bottom: 0;
  transform: translateX(38px) translateY(-4px) rotate(-45deg);
}

样式四：Animate To Right-Pointing Arrow

这非常类似于上面的版本,最终除了箭头指向的另一种方法(即向右)

.c-hamburger--htra {
  background-color: #ff9650;
}

.c-hamburger--htra span {
  transition: transform 0.3s;
}

.c-hamburger--htra span::before {
  transform-origin: top left;
  transition: transform 0.3s, width 0.3s, top 0.3s;
}

.c-hamburger--htra span::after {
  transform-origin: bottom left;
  transition: transform 0.3s, width 0.3s, bottom 0.3s;
}

/* active state, i.e. menu open */
.c-hamburger--htra.is-active {
  background-color: #e95d00;
}

.c-hamburger--htra.is-active span {
  transform: rotate(180deg);
}

.c-hamburger--htra.is-active span::before,
.c-hamburger--htra.is-active span::after {
  width: 50%;
}

.c-hamburger--htra.is-active span::before {
  top: 0;
  transform: translateX(-8px) translateY(4px) rotate(-45deg);
}

.c-hamburger--htra.is-active span::after {
  bottom: 0;
  transform: translateX(-8px) translateY(-4px) rotate(45deg);
}

需要一点js代码

下面是唯一需要的一点js代码

(function() {

  "use strict";

  var toggles = document.querySelectorAll(".c-hamburger");

  for (var i = toggles.length - 1; i >= 0; i--) {
    var toggle = toggles[i];
    toggleHandler(toggle);
  };

  function toggleHandler(toggle) {
    toggle.addEventListener( "click", function(e) {
      e.preventDefault();
      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
    });
  }

})();

效果参考 http://codepen.io/airen/pen/WvxYLK/