导航菜单

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

阿里云


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

HTML 结构

该按钮变形动画使用嵌套

也想出现在这里?联系我们
创客主机
的 HTML 结构。使用一个

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

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

  1. <section class="mod model-1">
  2.   <div class="menu">
  3.     <div class="bar"></div>
  4.     <div class="bar"></div>
  5.     <div class="bar"></div>
  6.   </div>
  7. </section>

CSS 样式

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

  1. .menu {
  2.   height: 100px;
  3.   width: 100px;
  4.   position: relative;
  5.   margin: auto;
  6.   padding-top: 20px;
  7.   border: 5px solid transparent;
  8.   -moz-border-radius: 100%;
  9.   -webkit-border-radius: 100%;
  10.   border-radius: 100%;
  11.   -moz-transition: 0.3s;
  12.   -o-transition: 0.3s;
  13.   -webkit-transition: 0.3s;
  14.   transition: 0.3s;
  15.   cursor: pointer;
  16. }
  17. .bar {
  18.   height: 5px;
  19.   width: 70px;
  20.   display: block;
  21.   margin: 10px auto;
  22.   position: relative;
  23.   background-color: #fff;
  24.   -moz-border-radius: 10px;
  25.   -webkit-border-radius: 10px;
  26.   border-radius: 10px;
  27.   -moz-transition: 0.4s;
  28.   -o-transition: 0.4s;
  29.   -webkit-transition: 0.4s;
  30.   transition: 0.4s;
  31. }

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

  1. .model-1 {
  2.   background-color: #663399;
  3. }
  4. .model-1 .bar {
  5.   position: absolute;
  6. }
  7. .model-1 .bar:nth-of-type(1) {
  8.   top: 15px;
  9.   -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;
  10.   -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;
  11.   -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
  12.   -webkit-transition-delay: 0.3s, 0.1s;
  13.   transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
  14.   -moz-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  15.   -webkit-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  16.   animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  17. }
  18. .model-1 .bar:nth-of-type(2) {
  19.   top: 30px;
  20.   -moz-transition: ease 0.3s 0.3s;
  21.   -o-transition: ease 0.3s 0.3s;
  22.   -webkit-transition: ease 0.3s;
  23.   -webkit-transition-delay: 0.3s;
  24.   transition: ease 0.3s 0.3s;
  25.   -moz-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  26.   -webkit-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  27.   animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  28. }
  29. .model-1 .bar:nth-of-type(3) {
  30.   top: 45px;
  31.   -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;
  32.   -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;
  33.   -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
  34.   -webkit-transition-delay: 0.3s, 0.1s;
  35.   transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
  36.   -moz-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  37.   -webkit-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  38.   animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  39. }
  40. .model-1 .menu:hover .bar:nth-of-type(1) {
  41.   top: 30px;
  42.   -moz-transform: rotate(45deg);
  43.   -ms-transform: rotate(45deg);
  44.   -webkit-transform: rotate(45deg);
  45.   transform: rotate(45deg);
  46.   -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;
  47.   -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;
  48.   -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
  49.   -webkit-transition-delay: 0.1s, 0.5s;
  50.   transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
  51. }
  52. .model-1 .menu:hover .bar:nth-of-type(2) {
  53.   opacity: 0;
  54. }
  55. .model-1 .menu:hover .bar:nth-of-type(3) {
  56.   top: 30px;
  57.   -moz-transform: rotate(-45deg);
  58.   -ms-transform: rotate(-45deg);
  59.   -webkit-transform: rotate(-45deg);
  60.   transform: rotate(-45deg);
  61.   -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;
  62.   -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;
  63.   -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
  64.   -webkit-transition-delay: 0.1s, 0.5s;
  65.   transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
  66. }

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

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

已有 437 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!