Implémentation de la barre de menus de transition en douceur CSS3 Transition

Cette fois, je vais vous présenter l'implémentation de la barre de menu de transition en douceur CSS3. Quelles sont les précautions pour implémenter la barre de menu de transition en douceur. Ce qui suit est un cas pratique, jetons un coup d'œil.

Les trois attributs majeurs de l'animation CSS3 (Transformation, Transition, Animation) sont présentés ci-dessous. La propriété transition est une propriété abrégée avec quatre propriétés : transition-property, transition-duration, transition-timing-function et transition-delay.

Syntaxe

transition: property duration timing-function delay;

Attributs :

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

Ce qui suit est un cas

Regardez d'abord les rendus :

Illustration du principe :

Lorsque la souris se déplace dans la liste des menus, ajoutez un style de survol. Autrement dit, définissez la valeur supérieure de p.wrap sur une valeur négative. Utilisez ensuite l'attribut transition pour en faire une transition en douceur.

Démo complète

<!--html-->
<style>
 .menu{
        margin: 100px auto;
    }
    .menu ul li{
        float:left;
        width: 50px;
        height: 25px;
        background-color: #2aabd2;
        margin-right: 5px;
        line-height: 25px;
        position: relative;
        overflow: hidden;
    }
    .menu ul li a{
        display: block;
        height:25px;
        width: 50px;
        text-align: center;
        line-height: 25px;
        color: white;
    }
    .menu ul li .awrap{
        position: absolute;
        top:0;
        left: 0;
    }
    .menu ul li .awrap:hover{
        transition: all .3s ease-in;
        top:-25px;
    }
</style>
<p>
    </p>

        
•             

                                   菜单             

          
        
•             

                                   菜单             

          
        
•             

                                   菜单             

          
        
•             

                                   菜单             

          
        
•             

                                   菜单             

          
    

Remarque : l'icône utilise l'icône de police Font Awesome. Si vous avez besoin d'en savoir plus, vous pouvez rechercher Font Awesome

<.>Je crois que vous l'avez lu. Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation des événements de pointeur en CSS3

Explication détaillée de l'utilisation de focus-within

CSS3 pour créer des publicités carrousel transparentes

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!