纯CSS3菜单汉堡包按钮变形动画特效

PetitQ 导航菜单 2019-1-21 1.78K 0 0

这是一款非常有趣的纯 CSS3 菜单汉堡包按钮变形动画特效。该特效共有 9 种不同的按钮变形动画效果，这些效果都是使用 CSS3 帧动画完成的，效果非常的酷。

HTML 结构

该按钮变形动画使用嵌套

也想出现在这里？联系我们吧

的 HTML 结构。使用一个

元素作为包裹元素，里面放置一个 div.menu 作为按钮元素。它的里面有三个空的

元素用于制作汉堡包按钮的三条横线。

```
<section class="mod model-1">
```
```
  <div class="menu">
```
```
    <div class="bar"></div>
```
```
    <div class="bar"></div>
```
```
    <div class="bar"></div>
```
```
  </div>
```
```
</section>
```

CSS 样式

首先为菜单和每个.bar 元素设置一些基本样式，并使用 transition 来添加平滑的动画过渡效果。

```
.menu {
```
```
  height: 100px;
```
```
  width: 100px;
```
```
  position: relative;
```
```
  margin: auto;
```
```
  padding-top: 20px;
```
```
  border: 5px solid transparent;
```
```
  -moz-border-radius: 100%;
```
```
  -webkit-border-radius: 100%;
```
```
  border-radius: 100%;
```
```
  -moz-transition: 0.3s;
```
```
  -o-transition: 0.3s;
```
```
  -webkit-transition: 0.3s;
```
```
  transition: 0.3s;
```
```
  cursor: pointer;
```
```
}
```
```
.bar {
```
```
  height: 5px;
```
```
  width: 70px;
```
```
  display: block;
```
```
  margin: 10px auto;
```
```
  position: relative;
```
```
  background-color: #fff;
```
```
  -moz-border-radius: 10px;
```
```
  -webkit-border-radius: 10px;
```
```
  border-radius: 10px;
```
```
  -moz-transition: 0.4s;
```
```
  -o-transition: 0.4s;
```
```
  -webkit-transition: 0.4s;
```
```
  transition: 0.4s;
```
```
}
```

在第一种按钮变形动画特效中，通过 nth-of-type 来选择各条汉堡包线条。对第一条使用 mrotr 帧动画，对第二条使用 fade 动画，对第三条使用 mrotl 帧动画。在鼠标滑过它们时，有分别修改它们的旋转角度和透明度。

```
.model-1 {
```
```
  background-color: #663399;
```
```
}
```
```
.model-1 .bar {
```
```
  position: absolute;
```
```
}
```
```
.model-1 .bar:nth-of-type(1) {
```
```
  top: 15px;
```

  -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;

  -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;

  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;

```
  -webkit-transition-delay: 0.3s, 0.1s;
```

  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;

  -moz-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);

  -webkit-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);

  animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);

```
}
```
```
.model-1 .bar:nth-of-type(2) {
```
```
  top: 30px;
```
```
  -moz-transition: ease 0.3s 0.3s;
```
```
  -o-transition: ease 0.3s 0.3s;
```
```
  -webkit-transition: ease 0.3s;
```
```
  -webkit-transition-delay: 0.3s;
```
```
  transition: ease 0.3s 0.3s;
```

  -moz-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);

  -webkit-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);

  animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);

```
}
```
```
.model-1 .bar:nth-of-type(3) {
```
```
  top: 45px;
```

  -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;

  -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;

  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;

```
  -webkit-transition-delay: 0.3s, 0.1s;
```

  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;

  -moz-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);

  -webkit-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);

  animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);

```
}
```

.model-1 .menu:hover .bar:nth-of-type(1) {

```
  top: 30px;
```
```
  -moz-transform: rotate(45deg);
```
```
  -ms-transform: rotate(45deg);
```
```
  -webkit-transform: rotate(45deg);
```
```
  transform: rotate(45deg);
```

  -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;

  -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;

  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;

```
  -webkit-transition-delay: 0.1s, 0.5s;
```

  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;

```
}
```

.model-1 .menu:hover .bar:nth-of-type(2) {

```
  opacity: 0;
```
```
}
```

.model-1 .menu:hover .bar:nth-of-type(3) {

```
  top: 30px;
```
```
  -moz-transform: rotate(-45deg);
```
```
  -ms-transform: rotate(-45deg);
```
```
  -webkit-transform: rotate(-45deg);
```
```
  transform: rotate(-45deg);
```

  -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;

  -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;

  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;

```
  -webkit-transition-delay: 0.1s, 0.5s;
```

  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;

```
}
```

其余代码请参考下载文件。

纯 CSS3 菜单汉堡包按钮变形动画特效

已有 444 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

纯CSS3菜单汉堡包按钮变形动画特效

HTML 结构

CSS 样式

纯 CSS3 菜单汉堡包按钮变形动画特效

相关文章

动画特效下拉导航菜单

炫酷的动态CSS按钮背景动画样式

纯CSS3实现的仿Mac系统的Dock工具栏菜单

发表回复取消回复

热销模板

导航菜单

HTML 结构

CSS 样式

纯 CSS3 菜单汉堡包按钮变形动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复