Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Atemberaubende sechseckige CSS3-Menüanimationseffekte

黄舟
Freigeben: 2017-01-17 17:30:39
Original
2100 Leute haben es durchsucht

Kurzes Tutorial

Dies ist ein cooler sechseckiger Menüanimationseffekt, der mit CSS3 und einer kleinen Menge JS-Code erstellt wurde. Das sechseckige Menü hat einen Hervorhebungsanimationseffekt, wenn die Maus darüber fährt. Wenn Sie auf das Menü klicken, wird jedes Menüelement entlang jeder Seite des Sechsecks angezeigt, um ein großes Sechseck zu bilden.

Verwenden der Methode

HTML-Struktur

Das sechseckige Menü wird mit einem erstellt, und die Menüelemente werden mit einer ungeordneten Liste erstellt

<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>
Nach dem Login kopieren

JavaScript

Das sechseckige Menü verwendet eine kleine Menge JS-Code, um das Mausklickereignis der Schaltfläche abzuhören und die entsprechende Klasse dafür hinzuzufügen und zu entfernen.

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;;
    }              
}
Nach dem Login kopieren

Das Obige ist der Inhalt der atemberaubenden sechseckigen CSS3-Menüanimationseffekte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage