Maison > interface Web > tutoriel CSS > Comment obtenir des animations à dégradé fluide en CSS en utilisant « background-position » ?

Comment obtenir des animations à dégradé fluide en CSS en utilisant « background-position » ?

Susan Sarandon

Libérer： 2024-12-13 17:24:11

original

409 Les gens l'ont consulté

Comment animer des dégradés en douceur à l'aide de CSS

Animer des dégradés en CSS peut être délicat, surtout si vous souhaitez obtenir des transitions fluides. Une approche qui donne des résultats incohérents consiste à modifier brusquement la position du dégradé.

Considérez le code suivant :

.animated {<br> largeur : 300px;<br> hauteur : 300px;<br> bordure : 1px noir uni;<br> animation : gra 5s infini;<br> animation-direction : inverse;<br> -webkit-animation : gra 5s infinite ;<br> -webkit-animation-direction : reverse;<br> animation-timing-function: linéaire;<br> -webkit-animation-timing-function: linéaire;<br>}</p><p>@keyframes gra {<br> 0% {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);

Copier après la connexion

}
50% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);

Copier après la connexion

}
100% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);

Copier après la connexion

}
}

Ce code crée un dégradé animation, mais il change brusquement de position, ce qui entraîne un effet saccadé. Pour résoudre ce problème, nous pouvons utiliser la propriété background-position dans les images clés pour déplacer le dégradé en douceur.

Voici un code CSS amélioré qui permet d'obtenir une animation de dégradé fluide :

< ;div class="snippet-code">

<h1>dégradé</h1><p>{</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height:300px;
width:300px;
border:1px solid black;
font-size:30px;
background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
background-size: 200% 200%;

-webkit-animation: Animation 5s ease infinite;
-moz-animation: Animation 5s ease infinite;
animation: Animation 5s ease infinite;

Copier après la connexion

}

@-webkit-keyframes Animation {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

Copier après la connexion

Copier après la connexion

Copier après la connexion

}
@-moz-keyframes Animation {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

Copier après la connexion

Copier après la connexion

Copier après la connexion

}
@keyframes Animation {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

Copier après la connexion

Copier après la connexion

Copier après la connexion

}

Dans ce code :

• Nous définissons la propriété background-position dans les images clés pour spécifier les positions de début et de fin du dégradé.
• Nous utilisons background-size pour définir la taille de la zone de dégradé, qui est plus grande que l'élément lui-même pour permettre un mouvement fluide .
• facilité dans la propriété d'animation zorgt voor een vloeiende overgang.

En appliquant ces principes, vous pouvez créer animations de dégradé fluides et visuellement attrayantes uniquement via CSS, sans avoir besoin de bibliothèques ou de frameworks JavaScript supplémentaires.

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!