首頁  >  文章  >  web前端  >  超炫CSS3六角形菜單動畫特效

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

黄舟
黄舟原創
2017-01-17 17:30:392034瀏覽

簡短教學

這是一款使用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="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)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn