超炫CSS3六角形菜單動畫特效

簡短教學

這是一款使用CSS3和少量js程式碼製作的酷炫六邊形選單動畫特效。此六角形選單在滑鼠滑過時帶有高光動畫效果，當點擊選單後，各個選單項目沿著六邊形的各條邊向外彈出，組成一個大的六邊形。

用方法

 HTML結構

該六邊形選單使用一個

<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="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/6.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
  </ul>
</nav>

 JavaScript

該六邊形選單使用少量的js程式碼來監聽按鈕的滑鼠點擊事件，為它新增和移除對應的class類別。

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';
    }              
}

以上就是超炫CSS3六角形選單動畫特效的內容，更多相關內容請關注PHP中文網（www.php.cn）！