簡短教學
這是一款使用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('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中文網(m.sbmmt.com)!