CSS-Codebeispiel für die Animation von Menüschaltflächen

Dieser Artikel bietet Ihnen ein Codebeispiel für die Implementierung einer Menüschaltflächenanimation mit CSS. Ich hoffe, dass er Ihnen als Referenz dienen wird.

Um ein Dropdown-Menü zu schreiben, klicken Sie auf die Schaltfläche. Vorher habe ich stattdessen ein Bild verwendet, um einen Effekt zu schreiben . Ich beziehe mich hauptsächlich auf die Schaltfläche in der oberen rechten Ecke des mobilen Terminals The Paper

Effekt:

HTML

    //vue 中通过点击事件改变class
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>

CSS

    <!--按钮容器 START-->
    .burger {
        cursor: pointer;
        display: inline-block;
        margin: 7px 6px 0 0;
        outline: none;
    }
    <!--按钮容器 END-->
    
    <!--三条横线 通过rotate3d实现旋转 START-->
    .burger p {
        width: 30px;
        height: 4px;
        margin-bottom: 6px;
        background-color: rgb(51, 51, 51);
        transform: rotate3d(0, 0, 0, 0);
    }
    <!--三条横线 END-->
    
    .burger.transform p {
        background-color: transparent;
    }

    .burger.transform p:first-of-type {
        top: 10px;
        transform: rotate3d(0, 0, 1, 45deg)
    }

    .burger.transform p:last-of-type {
        bottom: 10px;
        transform: rotate3d(0, 0, 1, -45deg)
    }

    <!--点击后第一个和第三个横线的效果 START-->
    .burger.transform p:first-of-type, .burger.transform p:last-of-type {
        transition: transform .4s .3s ease, background-color 250ms ease-in;
        background: #00c1de;
    }
    <!--点击后第一个和第三个横线的效果 END-->
    
    <!--取消点击后恢复动画 START-->
    .burger p:first-of-type, .burger p:last-of-type {
        transition: transform .3s ease .0s, background-color 0ms ease-out;
        position: relative;
    }
    <!--取消点击后恢复动画 END-->

Nur ​​die Verwendung von Übergängen kann auch den Effekt einer Animation durch Einstellungen erzielen. Bei Änderungen in verschiedenen Attributen kann die Animationssequenz durch Beherrschung der Änderungszeit und Verzögerungszeit erstellt werden

Das obige ist der detaillierte Inhalt vonCSS-Codebeispiel für die Animation von Menüschaltflächen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!