Rumah  >  Artikel  >  hujung hadapan web  >  超炫CSS3六边形菜单动画特效

超炫CSS3六边形菜单动画特效

黄舟
黄舟asal
2017-01-17 17:30:392034semak imbas

简要教程

这是一款使用CSS3和少量js代码制作的炫酷六边形菜单动画特效。该六边形菜单在鼠标滑过时带有高光动画效果,当点击菜单后,各个菜单项沿六边形的各条边向外弹出,组成一个大的六边形。

用方法

 HTML结构

该六边形菜单使用一个486d7a50595533609bc98d44595dc670来制作,菜单项使用一个无序列表来制作

<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="transparent"
                          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="img/1.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="img/2.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="img/3.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="img/4.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="img/5.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="img/6.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
  </ul>
</nav>

 JavaScript

该六边形菜单使用少量的js代码来监听按钮的鼠标点击事件,为它添加和移除相应的class类。

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

以上就是超炫CSS3六边形菜单动画特效的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn