見事な CSS3 六角形メニューアニメーション効果-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

見事な CSS3 六角形メニューアニメーション効果

黄舟

Jan 17, 2017 pm 05:30 PM

簡単なチュートリアル

これは、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コードを使用して作成されますボタンのマウスクリックイベントをリッスンし、それに対応するクラスを追加および削除します。

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 中国語 Web サイト (www.php.cn) に注目してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。