图片/图形
超炫CSS3六边形菜单动画特效
PetitQ
这是一款使用 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';
}}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
