CSS-Menüschaltflächenanimation

Um ein Dropdown-Menü zu schreiben, klicken Sie auf die Schaltfläche. Der Menüeingang erfolgt durch Klicken auf eine Symbolschaltfläche. Früher habe ich ein Bild verwendet, um es zu ersetzen. Heute möchte ich plötzlich CSS verwenden, um einen Effekt zu schreiben. Ich beziehe mich hauptsächlich auf die Schaltfläche in der oberen rechten Ecke des mobilen Pengpai-Terminals.

Wirkung:

HTML

    //Klasse durch Klickereignis in Vue ändern
    <div 
        Klasse="Burger" 
        Stil="float: rechts;"
        :Klasse="{'transform':rightTopBtn}"
        @click.stop="rightTopBtn=!rightTopBtn"
    >
        <div></div>
        <div></div>
        <div></div>
    </div>

CSS

  <!--Schaltflächencontainer START-->
    .burger {
        Cursor: Zeiger;
        Anzeige: Inline-Block;
        Rand: 7px 6px 0 0;
        Gliederung: keine;
    }
    <!--SchaltflächencontainerEND-->
    <!--Die drei horizontalen Linien werden durch rotate3d START gedreht-->
    .burger div {
        Breite: 30px;
        Höhe: 4px;
        Rand unten: 6px;
        Hintergrundfarbe: rgb(51, 51, 51);
        transformieren: 3d drehen(0, 0, 0, 0);
    }
    <!--Drei horizontale Linien ENDE-->
    .burger.transform div {
        Hintergrundfarbe: transparent;
    }
    .burger.transform div:erster-vom-Typ {
        oben: 10px;
        transformieren: 3d drehen(0, 0, 1, 45 Grad)
    }
    .burger.transform div:letzter-vom-Typ {
        unten: 10px;
        transformieren: 3d drehen(0, 0, 1, -45 Grad)
    }
    <!--Die Wirkung der ersten und dritten horizontalen Linie nach dem Klicken auf START-->
    .burger.transform div:erstes-vom-Typ, .burger.transform div:letztes-vom-Typ {
        Übergang: Transformation 0,4 s 0,3 s Leichtigkeit, Hintergrundfarbe 250 ms Leichtigkeit;
        Hintergrund: #00c1de;
    }
    <!--Die Wirkung der ersten und dritten horizontalen Linie nach dem KlickenEND-->
    <!--Animation nach Abbruch durch Klicken auf START fortsetzen-->
    .burger div:erstes-vom-Typ, .burger div:letztes-vom-Typ {
        Übergang: Transformation 0,3 s, Leichtigkeit 0,0 s, Hintergrundfarbe 0 ms, Auslaufzeit;
        Position: relativ;
    }
    <!--Animation nach Abbruch des Klicks fortsetzenEND-->

Der Effekt der Animation kann nur durch die Verwendung von Übergängen erzielt werden. Durch Festlegen der Änderungen verschiedener Attribute und Beherrschen der Änderungs- und Verzögerungszeit kann die Animation sequenziell angeordnet werden.

Zusammenfassen

Oben sehen Sie die CSS-Menüschaltflächenanimation, die ich Ihnen vorgestellt habe. Ich hoffe, sie ist hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten!

<<: MySQL verwendet Binlog-Protokolle zur Implementierung der Datenwiederherstellung

>>: Methode zur Behebung von IE6-Space-Bugs