Reine kreative CSS3-Navigationsmenüeffekte

Kurzes Tutorial

Dies ist ein sehr kreativer reiner CSS3-Navigationsmenüeffekt. Dieses Navigationsmenü verwendet hauptsächlich CSS3-Transformations- und Übergangsmethoden, um Effekte zu erzielen, was sehr einfach ist. Dieser Spezialeffekt wird durch Attack of the Sun bereitgestellt.

Verwendung

HTML-Struktur

Das Navigationsmenü verwendet ein

-Element, um eine ungeordnete Liste einzuschließen.

<nav>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Demos</a></li>
      <li><a href="#">中文</a></li>
  </ul>
</nav>

CSS-Stil

Wenn die Maus über den Menüpunkt gleitet, zeigt der Menüpunkt eine leichte Kippanimation und zwei Linien werden über und unter dem Menüpunkt herausgeschoben. Die Neigungsanimation des Menüelements verwendet das Transformationsattribut, um das Hyperlinkelement zu drehen und zu skalieren, wenn der Mauszeiger über das Menüelement bewegt wird.

li a {
    display: block;
    font-size: 20px;
    text-align: center;
    padding: 10px 15px;
}
 
li a:hover {
    transform: rotate(5deg) scale(1.1);
}

Die oberen und unteren Zeilen des Menüelements werden mithilfe der :before- und :after-Pseudoelemente des Hyperlink-Elements erstellt. Sie beginnen mit einer Transparenz von 0 und einer Breite von 0 und verwenden die Transformationseigenschaft, um sie zu drehen und zu verschieben.

li a:before, li a:after {
    opacity: 0;
    border-top: 1px solid white;
    content: '';
    display: block;
    position: relative;
    z-index: -1;
    margin: auto;
    width: 0px;
}
 
li a:before {
    top: 0px;
    transform: rotate(120deg) translateY(-50%) translateX(-50%);
}
 
li a:after {
    top: 5px;
    transform: rotate(-60deg) translateY(-50%) translateX(-50%);
}

Wenn die Maus darüber fährt, ändert sich ihre Transparenz auf 1, ihre Breite wird auf 20 Pixel eingestellt und sie verwenden einen sanften Übergang mit dem Erleichterungseffekt.

li a:hover:before, li a:hover:after{
    transition: all 0.3s ease;
    opacity: 1;
    width: 20px;
}

Das Obige ist der Inhalt reiner CSS3-Spezialeffekte für kreative Navigationsmenüs. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).