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

簡要教程

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

用方法

HTML結構

該六邊形菜單使用一個<svg>來製作，功能表項目使用一個無序列表來製作

<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('hexNav'); document.getElementById('menuBtn').onclick = function() {    var className = ' ' + hexNav.className + ' ';    if ( ~className.indexOf(' active ') ) {        hexNav.className = className.replace(' active ', ' ');    } else {        hexNav.className += ' active';    }              }

以上就是超炫CSS3六邊形菜單動畫特效的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

