卡卡网

汉堡（三横杠）菜单是移动菜单的开关，所以很多人会追求它的样式设计、动画设计如何更美观好看，本文介绍3款纯CSS3实现的汉堡（三横杠）菜单点击变叉动画。

效果图

demodownload

HTML

 下面是3款菜单的HTML结构，它们的代码是一样的，不同的是它们的CSS样式。

<div class="hamburger" id="hamburger-1" onclick="this.classList.toggle('is-active')"><span class="line"></span><span class="line"></span><span class="line"></span></div>

<div class="hamburger" id="hamburger-2" onclick="this.classList.toggle('is-active')"><span class="line"></span><span class="line"></span><span class="line"></span></div>

<div class="hamburger" id="hamburger-3" onclick="this.classList.toggle('is-active')"><span class="line"></span><span class="line"></span><span class="line"></span></div>

我们看到，每个div标签有一个onclick属性，这是鼠标点击事件，点击图标后三横杠和叉这两个图标以动画形式切换。 

CSS

下面是3款菜单的CSS样式。

示例1

#hamburger-1.is-active .line:nth-child(2) {
  opacity: 0;
}
#hamburger-1.is-active .line:nth-child(1) {
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}
#hamburger-1.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}

示例2

#hamburger-2 {
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#hamburger-2.is-active {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#hamburger-2:before {
  content: "";
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  border: 5px solid transparent;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  border-radius: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#hamburger-2.is-active:before {
  border: 5px solid #ecf0f1;
}
#hamburger-2.is-active .line {
  width: 35px;
}
#hamburger-2.is-active .line:nth-child(2) {
  opacity: 0;
}
#hamburger-2.is-active .line:nth-child(1) {
  -webkit-transform: translateY(13px);
  -ms-transform: translateY(13px);
  -o-transform: translateY(13px);
  transform: translateY(13px);
}
#hamburger-2.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-13px) rotate(90deg);
  -ms-transform: translateY(-13px) rotate(90deg);
  -o-transform: translateY(-13px) rotate(90deg);
  transform: translateY(-13px) rotate(90deg);
}

示例3

#hamburger-3 {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#hamburger-3.is-active {
  animation: smallbig 0.6s forwards;
}
@keyframes smallbig {
  0%, 100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}
#hamburger-3.is-active .line:nth-child(1),#hamburger-3.is-active .line:nth-child(2),#hamburger-3.is-active .line:nth-child(3) {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
#hamburger-3.is-active .line:nth-child(2) {
  opacity: 0;
}
#hamburger-3.is-active .line:nth-child(1) {
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}
#hamburger-3.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}

CSS解释

我们看到，CSS主要代码是使用 transition 和 transform 两个属性来实现，这两个是动画属性。下面文章详述了这两个属性的使用。

• CSS3 transition 和 transform 属性介绍

JavaScript

本文示例中，JavaScript不是必须的，但我们可以用JavaScript来实现鼠标点击事件。我们可以把HTML代码里div的onclick属性去掉，然后用JavaScript来给div绑定点击事件。代码如下：

<div class="hamburger" id="hamburger-1"><span class="line"></span><span class="line"></span><span class="line"></span></div>
<div class="hamburger" id="hamburger-2"><span class="line"></span><span class="line"></span><span class="line"></span></div>
<div class="hamburger" id="hamburger-3"><span class="line"></span><span class="line"></span><span class="line"></span></div>

<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".hamburger").click(function() {
      $(this).toggleClass("is-active");
    });
});
</script>

这里用的是jQuery实现，因此要先引用jQuery库文件jquery-3.2.1.min.js。

总结

本文介绍了3款纯CSS3实现汉堡(三横杠)菜单点击变叉动画，喜欢的朋友可以收藏本页，也可以直接下载源码备用。

您可能对以下文章也感兴趣

• 纯CSS3实现汉堡(三横杠)菜单点击变为叉(X)关闭图标
• 纯CSS3实现的汉堡(三条横杠)菜单，点击变叉
• 纯CSS+svg实现三条横线点击变叉菜单按钮动画

相关文章

• jQuery黑色左侧边导航菜单(可折叠可缩进滑出)
• layui框架实现的可折叠侧栏导航菜单（适合信息管理系统）
• 非常受欢迎好看的CSS3水平导航菜单(含二级菜单)
• 一款简易的CSS3侧栏滑动导航菜单
• 很漂亮的 Bootstrap 3 侧栏滑动导航菜单【演示/源码下载】
• 一款漂亮的CSS3蓝色垂直导航菜单
• 二级菜单水平方向排列的CSS3响应式水平导航菜单
• 含二级下拉菜单的CSS3响应式水平导航菜单
• CSS3 PC/移动响应式网页水平导航菜单
• CSS3折叠下拉菜单（深色背景）【演示/源码下载】

标签: 菜单  三横杠  汉堡菜单  三横杠菜单