CSS 动画六边形菜单

Question

我正在尝试找出构建动画六边形菜单的最佳方法。请参阅下图以便更好地理解：

六边形汉堡包按钮在中间。单击后，它会显示汉堡包按钮周围的三角形。后者变成了一个十字架来扭转这个过程，把一切都隐藏起来。

我的图片其实一开始就少了一步。第一张图片应该只显示汉堡按钮，就像codepen演示一样。

所以我的问题如下：

你能告诉我如何构建这个 六边形菜单动画 从 HTML 到 CSS 通过 jQuery 和其他.你会用什么技术来实现它。请记住，虽然 codepen 示例具有简单的图标，但我的具有三角形图片，一旦悬停就会显示带副标题的标题。

Answer 1

好的。我为您制作了一个 fiddle，因为它既有趣又不错（并且我会保留一些东西以备将来使用），并且因为您可以使用它来实现您想要的。

首先是非常基本的 HTML：

<div class="container">
    <div class="shape x1"></div>
    <div class="shape x2"></div>
    <div class="shape x3"></div>
    <div class="shape x4"></div>
    <div class="shape x5"></div>
    <div class="shape x6"></div>
    <div class="button">X</a>
</div>

并且简单易懂。基本上在一个相对容器上你放置你的三角形（每个 div），位置绝对。

我已经为三角形使用了 css 形状，但我确实推荐您的示例，特别是因为您可以在形状内部使用图像，以便更好地在正常形状上使用具有透明背景的普通图像 div.然后定位元素直到你得到你想要的。

所以我使用 comun class 形状来获得 comon css 属性：

shape {
    width: 0;
    height: 0;
    border-left: 58px solid transparent;
    border-right: 58px solid transparent;
    border-bottom: 100px solid red;
    position:absolute;
    transform-origin: center;
}

然后 "x" classes 将元素定位为这个元素：

.x1 {
    transform: rotate(90deg);
    left:0;
    top:50px;    
}

如果你使用三角形图像，显然你忽略了旋转。

我把按钮放在了中间。

然后是这个非常简单的时间 jquery:

$(document).ready(function () {
            $('.button').click(function () {
                $('.x1').toggleClass("trans1");
                $('.x2').toggleClass("trans2");
                $('.x3').toggleClass("trans3");
                $('.x4').toggleClass("trans4");
                $('.x5').toggleClass("trans5");
                $('.x6').toggleClass("trans6");
                $('.button').toggleClass("button2")

            });
        });

这基本上是在您单击按钮时向每个元素添加和删除 class。

现在您只需使用新的 classes 来重新定位元素并创建您想要的效果...使用新按钮 class 来（例如）更改背景图像你的按钮（交叉汉堡），只需添加一个简单的过渡，如：

transition: all 1s linear;

这里有FIDDLE。希望对您的项目有所帮助。

已编辑：如果您希望您的元素 "close" 带有过渡，请将属性添加到原始 class 元素中，而不是添加到 jquery 创建的元素中。（我现在更喜欢它）

Answer 2

这是

的方法和演示

Hexagon menu demo

这里是六边形菜单的 gif 动画：

六边形菜单主要特点：

根据视口大小 (vmin) 响应。这可以通过将 width/height 值更改为百分比来修改（需要保持纵横比，请参阅 here）
图片（带有 <img/> 标签）、标题和副标题
6 个菜单项
六边形轮廓中的动画汉堡图标
菜单项边界被剪裁成三角形，因此它们不会相互重叠。这样，点击事件和悬停状态只有在实际菜单项为hovered/clicked时才会触发（IE除外，浏览器支持见文末post）
可以在图像、渐变或任何非纯色背景上显示特色

六边形布局：

CSS3 二维变换使三角形 skewY() 和 rotate()
菜单项用 .tr 和 .clip 剪裁成三角形，用 .clip 不倾斜，用 .content 不旋转汉堡周围的六边形是用 SVG 多边形制作的（比 CSS（参见第 1 版）
汉堡图标由 span 和 2 个伪元素组成

带有动画的六边形菜单：

三角形用 transition-delay 属性

translate()

opacity

三角形的 "bounce effect" 动画是用 transition-timming-function 和三次贝塞尔曲线
通过转换 2 个伪元素（translate() 和 rotate()）并将中心元素背景淡化为透明的 rgba 颜色来制作汉堡交叉动画

悬停动画：

汉堡六边形悬停效果是通过对 SVG <polygon> 元素的 stroke-dashoffset 属性进行动画制作的。
菜单项标题和副标题使用 3D 变换 (translateZ()) 和不透明度在悬停时显示。图像同时淡出

使用的技术：

CSS 是在 SCSS 和 Autoprefixer 的帮助下编码的，以使其更易于编写、阅读和缩短。在demo中点击"view compiled"按钮可以看到编译后的CSS（编译后的CSS也可以在这个post)
汉堡周围六边形的 SVG
HTML 用于标记
通过 class 改变容器

浏览器支持：

我在 IE 11、chrome、FF 和 windows 系统上的 Opera 上测试了这个菜单。并且菜单适用于所有这些浏览器。 Chrome 和 FF 使用模糊渲染字体（如使用 chrome 制作的动画 gif 所示）并且 FF 倾向于为三角形制作锯齿边。

IE 11 的字体和三角形输出质量最好但是：

它 doesn't support SMIL animations 因此不会在汉堡六边形上呈现悬停效果
link 的溢出属性被忽略，三角形的边界未保持

我使用 crossbrowser testing 来测试 Safari 支持，六边形菜单也适用于该系统。

对于走到这一步的人，这里是另一个 link 演示：hexagon menu
以及编译后的完整代码 CSS :

var hexNav = document.getElementById('hexNav');

document.getElementById('menuBtn').onclick = function() {
    var className = ' ' + hexNav.className + ' ';
    if ( ~className.indexOf(' active ') ) {
        hexNav.className = className.replace(' active ', ' ');
    } else {
        hexNav.className += ' active';
    }              
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: #E3DFD2;
}

ul {
  list-style-type: none;
}

a, a:hover, a:focus, a:visited {
  text-decoration: none;
}

nav {
  position: relative;
  width: 70vmin;
  height: 70vmin;
  min-width: 500px;
  min-height: 500px;
  margin: 0 auto;
  overflow: hidden;
}

/** MENU BUTTON ******************************************/
#menuBtn {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 10%;
  height: 10%;
  cursor: pointer;
  z-index: 2;
  will-change: transform;
}
#menuBtn svg {
  display: block;
}
#menuBtn:hover svg polygon {
  -webkit-animation: hexHover 0.7s;
          animation: hexHover 0.7s;
}
#menuBtn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  padding: 8px 0;
  background-clip: content-box;
  background-color: #585247;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: background-color 0.5s;
          transition: background-color 0.5s;
}
#menuBtn span:before, #menuBtn span:after {
  position: absolute;
  background-color: #585247;
  content: '';
  width: 20px;
  height: 2px;
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s;
}
#menuBtn span:before {
  top: 0;
}
#menuBtn span:after {
  bottom: 0px;
}

@-webkit-keyframes hexHover {
  0% {
    stroke-dasharray: 0,0,300;
  }
  10% {
    stroke-dasharray: 0,20,300;
  }
  100% {
    stroke-dasharray: 300,20,300;
  }
}

@keyframes hexHover {
  0% {
    stroke-dasharray: 0,0,300;
  }
  10% {
    stroke-dasharray: 0,20,300;
  }
  100% {
    stroke-dasharray: 300,20,300;
  }
}
/** MENU ITEMS *******************************************/
#hex {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.1) translatez(0);
      -ms-transform: scale(0.1) translatez(0);
          transform: scale(0.1) translatez(0);
  -webkit-transition: -webkit-transform 0.05s 0.5s;
          transition: transform 0.05s 0.5s;
}

.tr {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 34.6%;
  height: 40%;
  -webkit-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
          transform-origin: 0 100%;
  overflow: hidden;
  -webkit-transform: skewY(-30deg);
      -ms-transform: skewY(-30deg);
          transform: skewY(-30deg);
  opacity: 0;
}

.tr:nth-child(1) {
  -webkit-transform: rotate(0deg) skewY(-30deg);
      -ms-transform: rotate(0deg) skewY(-30deg);
          transform: rotate(0deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(1) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(1) .content {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  padding-left: 15%;
  -webkit-perspective-origin: 30% 70%;
          perspective-origin: 30% 70%;
}

.active .tr:nth-child(1) {
  -webkit-transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.05s, -webkit-transform 0.5s 0.05s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.05s, transform 0.5s 0.05s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(2) {
  -webkit-transform: rotate(60deg) skewY(-30deg);
      -ms-transform: rotate(60deg) skewY(-30deg);
          transform: rotate(60deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(2) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(2) .content {
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  top: -8%;
  left: 6.67%;
  padding-left: 30%;
  -webkit-perspective-origin: 30% 50%;
          perspective-origin: 30% 50%;
}

.active .tr:nth-child(2) {
  -webkit-transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.1s, transform 0.5s 0.1s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(3) {
  -webkit-transform: rotate(120deg) skewY(-30deg);
      -ms-transform: rotate(120deg) skewY(-30deg);
          transform: rotate(120deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(3) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(3) .content {
  -webkit-transform: rotate(-150deg);
      -ms-transform: rotate(-150deg);
          transform: rotate(-150deg);
  -webkit-transform-origin: 42.3% 36.5%;
      -ms-transform-origin: 42.3% 36.5%;
          transform-origin: 42.3% 36.5%;
  padding-left: 10%;
  -webkit-perspective-origin: 30% 30%;
          perspective-origin: 30% 30%;
}

.active .tr:nth-child(3) {
  -webkit-transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.15s, -webkit-transform 0.5s 0.15s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.15s, transform 0.5s 0.15s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(4) {
  -webkit-transform: rotate(180deg) skewY(-30deg);
      -ms-transform: rotate(180deg) skewY(-30deg);
          transform: rotate(180deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(4) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(4) .content {
  -webkit-transform: rotate(-210deg);
      -ms-transform: rotate(-210deg);
          transform: rotate(-210deg);
  -webkit-transform-origin: 65.4% 38.4%;
      -ms-transform-origin: 65.4% 38.4%;
          transform-origin: 65.4% 38.4%;
  padding-left: 30%;
  -webkit-perspective-origin: 70% 30%;
          perspective-origin: 70% 30%;
}

.active .tr:nth-child(4) {
  -webkit-transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.2s, transform 0.5s 0.2s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(5) {
  -webkit-transform: rotate(240deg) skewY(-30deg);
      -ms-transform: rotate(240deg) skewY(-30deg);
          transform: rotate(240deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(5) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(5) .content {
  -webkit-transform: rotate(-270deg);
      -ms-transform: rotate(-270deg);
          transform: rotate(-270deg);
  top: -8%;
  left: 6.67%;
  padding-left: 15%;
  -webkit-perspective-origin: 70% 50%;
          perspective-origin: 70% 50%;
}

.active .tr:nth-child(5) {
  -webkit-transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.25s, -webkit-transform 0.5s 0.25s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.25s, transform 0.5s 0.25s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(6) {
  -webkit-transform: rotate(300deg) skewY(-30deg);
      -ms-transform: rotate(300deg) skewY(-30deg);
          transform: rotate(300deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(6) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(6) .content {
  -webkit-transform: rotate(-330deg);
      -ms-transform: rotate(-330deg);
          transform: rotate(-330deg);
  -webkit-transform-origin: 106.7% 25.2%;
      -ms-transform-origin: 106.7% 25.2%;
          transform-origin: 106.7% 25.2%;
  padding-left: 30%;
  -webkit-perspective-origin: 70% 70%;
          perspective-origin: 70% 70%;
}

.active .tr:nth-child(6) {
  -webkit-transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.3s, transform 0.5s 0.3s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(7) {
  -webkit-transform: rotate(360deg) skewY(-30deg);
      -ms-transform: rotate(360deg) skewY(-30deg);
          transform: rotate(360deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(7) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(7) .content {
  -webkit-transform: rotate(-390deg);
      -ms-transform: rotate(-390deg);
          transform: rotate(-390deg);
}

.active .tr:nth-child(7) {
  -webkit-transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.35s, -webkit-transform 0.5s 0.35s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.35s, transform 0.5s 0.35s cubic-bezier(0, 2.3, 0.8, 1);
}

.clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 116%;
  height: 86.66%;
  overflow: hidden;
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}

.content {
  position: absolute;
  width: 86.6%;
  height: 116%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  font-size: 2vmin;
  -webkit-perspective: 500px;
          perspective: 500px;
  background: #000;
}
.content img {
  position: absolute;
  top: 0;
  left: -50%;
  right: -50%;
  margin: auto;
  height: 100%;
  z-index: -1;
  -webkit-transition: opacity 0.3s;
          transition: opacity 0.3s;
  pointer-events: none;
}
.content h2, .content p {
  position: absolute;
  width: 60%;
  line-height: 1em;
  color: #fff;
  opacity: 0;
  -webkit-transform: translateZ(-50px);
          transform: translateZ(-50px);
}
.content h2 {
  bottom: 50%;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 2em;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
          transition: transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
}
.content p {
  position: absolute;
  top: 50%;
  font-size: 1em;
  -webkit-transition: -webkit-transform 0.3s 0.075s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.075s;
          transition: transform 0.3s 0.075s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.075s;
}
.content:hover h2, .content:hover p {
  opacity: 1;
  -webkit-transform: translatez(0);
      -ms-transform: translatez(0);
          transform: translatez(0);
}
.content:hover img {
  opacity: 0.4;
}

.active #menuBtn:hover svg polygon {
  -webkit-animation: none;
          animation: none;
}
.active #menuBtn span {
  background-color: transparent;
}
.active #menuBtn span:before {
  -webkit-transform: translatey(8px) rotate(45deg);
      -ms-transform: translatey(8px) rotate(45deg);
          transform: translatey(8px) rotate(45deg);
}
.active #menuBtn span:after {
  -webkit-transform: translatey(-8px) rotate(-45deg);
      -ms-transform: translatey(-8px) rotate(-45deg);
          transform: translatey(-8px) rotate(-45deg);
}
.active #hex {
  -webkit-transform: scale(0.9) translatez(0);
      -ms-transform: scale(0.9) translatez(0);
          transform: scale(0.9) translatez(0);
  -webkit-transition: none;
          transition: none;
  will-change: transform;
}
.active .tr {
  opacity: 1;
  will-change: transform;
}

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
<nav id="hexNav">
  <div id="menuBtn">
    <svg viewbox="0 0 100 100">
      <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="none" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300"/>
    </svg>
    <span></span>
  </div>
  <ul id="hex">
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
  </ul>
</nav>

这里是 link 到 : first version

Answer 3

希望这对某人有所帮助这是一个带有工作示例的代码笔。 https://codepen.io/jaygriggs/pen/zYpaKBY


nav {
  position: relative;
  width: 70vmin;
  height: 70vmin;
  min-width: 500px;
  min-height: 500px;
  margin: 0 auto;
  overflow: hidden;
}

/** MENU BUTTON ******************************************/
#menuBtn {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 10%;
  height: 10%;
  z-index: 2;
  
}
#menuBtn svg {
  display: block;
}
#menuBtn svg polygon:hover {
  -webkit-animation: hexHover 0.7s;
          animation: hexHover 0.7s;
  cursor: pointer;
}
#menuBtn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  padding: 8px 0;
  background-clip: content-box;
  background-color: #585247;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s;
  pointer-events: none;
}
#menuBtn span:before, #menuBtn span:after {
  position: absolute;
  background-color: #585247;
  content: '';
  width: 20px;
  height: 2px;
  transition: transform 0.3s;
}
#menuBtn span:before {
  top: 0;
}
#menuBtn span:after {
  bottom: 0px;
}