CSS3 implémente l'animation d'expansion et de réduction de la barre latérale

Cet article présente principalement comment utiliser CSS3 pour implémenter l'animation d'expansion et de réduction de la barre latérale, et joint un exemple de code. Il est très détaillé et recommandé aux amis qui en ont besoin. Les règles

@keyframes

sont utilisées pour créer des animations.

Spécifiez un certain style CSS dans @keyframes pour créer un effet d'animation qui passe progressivement du style actuel à un nouveau style

Lors de la création d'une animation dans @keyframes, veuillez la lier à une sélection. . appareil, sinon l’effet d’animation ne sera pas produit.

L'animation peut être liée au sélecteur en spécifiant au moins deux des propriétés d'animation CSS3 suivantes :

Spécifiez le nom de l'animation
Spécifiez la durée de l'animation
animation L'attribut
animation est un attribut raccourci permettant de définir les attributs d'animation :

animation-name : Spécifie le nom de l'animation @keyframes.
animation-duration : Spécifie les secondes ou millisecondes nécessaires à l'animation pour terminer un cycle. La valeur par défaut est 0.
animation-timing-function : Spécifie la courbe de vitesse de l'animation. La valeur par défaut est « facilité ».
animation-delay : Spécifie quand l'animation démarre. La valeur par défaut est 0
animation-iteration-count : Spécifie le nombre de fois que l'animation est jouée. La valeur par défaut est 1.
animation-direction : Spécifie si l'animation est jouée à l'envers lors du cycle suivant. La valeur par défaut est "normale".
animation-fill-mode : Spécifie l'état en dehors du temps d'animation de l'objet

Implémentation de la barre latérale

/* 动画定义 */
@-webkit-keyframes move_right {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}
@keyframes move_right {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}
@-webkit-keyframes move_left {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-120px);
        transform: translateX(-120px);
    }
}
@keyframes move_left {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-120px);
        transform: translateX(-120px);
    }
}
@-webkit-keyframes move_up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}
@keyframes move_up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}

/* 动画绑定 */
 .move_right {
     -webkit-animation-name            : move_right;
     animation-name            : move_right;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .move_left {
     -webkit-animation-name            : move_left;
     animation-name            : move_left;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .move_up {
     -webkit-animation-name            : move_up;
     animation-name            : move_up;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .fadeIn {
     -webkit-transform : translateX(120px);
     transform : translateX(120px); 
     opacity: 1;
 }
 .fadeInUp {
     -webkit-transform : translateY(-250px);
     transform : translateY(-250px);
     opacity: 1;
     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
     transition :transform .2s ease-out, opacity .2s ease-out;
 }
 .fadeOutLeft {
     -webkit-transform : translateX(-120px);
     transform : translateX(-120px); 
     opacity: 0.0;
     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
     transition :transform .2s ease-out, opacity .2s ease-out;
 }

html

<!doctype html>
 <html lang="en" class="fullHeight">
 <head>
     <meta charset="UTF-8">
     <title>demo</title>
     <link rel="stylesheet" type="text/css" href="sidebar.css">
 </head>
 <body class="fullHeight">
     <p class=&#39;sidebar fullHeight&#39;>sidebar</p>
     <p class="controller">
         <p>
             <button onclick="fadeIn()">淡进</button>
             <button onclick="fadeOut()">淡出</button>
         </p>
         <p>
             <button onclick="fadeInUp()">向上淡进</button>
             <button onclick="fadeOutLeft()">向左淡出</button>
         </p>
     </p>
     <script src="sidebarEffects.js"></script>
 </body>
 </html>

Ajouter JS

<script>
 var sidebarEl = document.querySelector(".sidebar");
 function fadeIn (e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;0px&#39;;
     sidebarEl.classList.add(&#39;move_right&#39;);
 }
 function fadeOut (e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 function fadeInUp(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;250px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_up&#39;);
 }
 function fadeOutLeft(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 </script>

Ce qui précède contient tout le contenu et le code permettant d'utiliser CSS3 pour créer des effets d'animation dans la barre latérale. Amis, veuillez suivre vos propres instructions. Améliorez-le simplement et embellissez-le en fonction des besoins de votre projet.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment dessiner une animation de cercle de chargement avec CSS3

Comment configurer CSS Couleur de la police du texte

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!