Exemple de code CSS pour l'animation des boutons de menu

Ce que cet article vous apporte est un exemple de code pour implémenter l'animation des boutons de menu avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Pour écrire un menu déroulant, cliquez sur le bouton. L'entrée du menu consiste à cliquer sur un bouton icône. Avant, j'utilisais une image à la place. Aujourd'hui, j'ai soudain envie d'utiliser du CSS pour écrire un effet. . Je fais principalement référence au bouton dans le coin supérieur droit du terminal mobile The Paper

Effet :

<.>HTML

CSS

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

    <!--按钮容器 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-->

Vous pouvez également utiliser la transition uniquement. Pour obtenir l'effet d'animation, en définissant les changements de différents attributs et en maîtrisant le temps de changement et le temps de retard, l'animation peut être séquencée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!