当前位置:首页 > 教程 > Web前端 > HTML+CSS+JS 实现图标旋转效果

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

一组动画css-only汉堡菜单切换开关,转换时点击代表积极(或菜单打开)状态。
HTML+CSS+JS 实现图片旋转效果

简介

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

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

HTML代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button class="c-hamburger c-hamburger--rot">
  <span>toggle menu</span>
</button>
 
<button class="c-hamburger c-hamburger--htx">
  <span>toggle menu</span>
</button>
 
<button class="c-hamburger c-hamburger--htla">
  <span>toggle menu</span>
</button>
 
<button class="c-hamburger c-hamburger--htra">
  <span>toggle menu</span>
</button>

CSS代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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图标了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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

样式一 Rotating Icon

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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”

样式二:Animate To “X”

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.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

样式四:Animate To Right-Pointing Arrow
这非常类似于上面的版本,最终除了箭头指向的另一种方法(即向右)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(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/

  • << HTML5地理位置定位获取经纬度
  • js60秒倒计时重新发送短信 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/html-css-js-hamburger-icons/

    相关文章 近期热评 最新文章

    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。