Conseil rapide: comment animer les gradients de texte et les motifs dans CSS

Dans cette astuce rapide, nous allons montrer à quel point il est facile d'animer un gradient d'arrière-plan avec CSS.

Dans un article récent, nous avons montré comment définir un gradient de fond sur le texte. La démo de codepen ci-dessous montre le résultat.

Voir le stylo
Texte avec gradient de gauche à droit par SitePoint (@SitePoint)
sur codepen.

Assurez-vous de lire cet article si vous ne savez pas comment nous sommes arrivés à ce résultat, car nous nous construire sur cet exemple ci-dessous.

Pour le bien de cette démo, ajoutons quelques couleurs supplémentaires à notre fond dégradé:

<span>h1 {
</span>  <span>background-image: linear-gradient(
</span>    <span>45deg,
</span>    <span>#ffb3ba,
</span>    <span>#c49c6e,
</span>    <span>#bfbf76,
</span>    <span>#77b084,
</span>    <span>#ff7e74,
</span>    <span>#3b82f6,
</span>    <span>#c084fc,
</span>    <span>#db2777
</span>   <span>);
</span><span>}
</span>

Si nous désactivons le clip de fond: texte et texte de texte: transparent pendant un moment, nous avons une meilleure idée de la façon dont notre dégradé remplit la boîte de contenu du texte.

Voir le stylo
Texte avec gradient d'arrière-plan animé: 1 par SitePoint (@SitePoint)
sur codepen.

Passons maintenant aux étapes d'animation de notre dégradé de fond.

Étape 1: Réglage de la taille de l'arrière-plan

Pour animer notre arrière-plan de dégradé, nous devons le rendre plus grand que la boîte de contenu du texte, nous ne pouvons donc pas tout voir en même temps. Nous pouvons le faire avec la propriété pratique de la taille de l'arrière-plan. (Vous pouvez tout lire sur la taille de l'arrière-plan ici.)

Je vais régler la largeur de notre gradient de fond à trois fois la largeur de notre élément de cap:

<span>h1 {
</span>  <span>background-size: 300% 100%;
</span><span>}
</span>

Maintenant, seul un tiers du fond de dégradé sera visible à tout moment, comme le montre ci-dessous.

Voir le stylo
Texte avec gradient d'arrière-plan animé: Étape 2 par SitePoint (@SitePoint)
sur codepen.

Étape 2: Définition d'une animation

Ensuite, nous allons configurer une animation qui déplacera l'arrière-plan afin que nous en verrons différentes parties au fil du temps.

Nous pouvons configurer une règle d'animation simple comme:

<span>h1 {
</span>  <span>animation: gradientAnimation 8s linear infinite;
</span><span>}
</span>

qui déplacera l'arrière-plan d'avant en arrière une fois toutes les 16 secondes.

Ensuite, nous allons configurer une déclaration @keyframes:

<span><span>@keyframes gradientAnimation</span> {
</span>  <span>0% {
</span>    <span>background-position: 0;
</span>  <span>}
</span>  <span>to {
</span>    <span>background-position: 100%;
</span>  <span>}
</span><span>}
</span>

Cette instruction simple @keyframes déplacera notre arrière-plan du haut à gauche vers le bas à droite toutes les huit secondes.

Dans le stylo ci-dessous, nous avons encore une fois désactivé le Clip d'arrière-plan: texte et couleur: transparent afin que nous puissions voir ce qui se passe en arrière-plan.

Voir le stylo
Texte avec gradient d'arrière-plan animé: Étape 3 par SitePoint (@SitePoint)
sur codepen.

Une fois que nous avons réactivé le clip de fond: texte et couleur: transparent, nous voyons le produit fini.

Voir le stylo
Texte avec gradient d'arrière-plan animé: Étape 4 (finale) par SitePoint (@SitePoint)
sur codepen.

assez cool!

Animer une image d'arrière-plan

Dans notre article sur l'ajout d'effets et de motifs de gradient au texte, nous avons également utilisé une image d'arrière-plan florale. (Voir le stylo pour cela ici.)

Essayons également de l'animation de cet arrière-plan. Nous le ferons légèrement différemment, car nous ne voulons pas déformer l'image d'arrière-plan.

Retirer la taille de l'arrière-plan: contenue de la démo d'origine et ne pas régler une taille d'arrière-plan du tout. Cela nous laisse avec ceci:

<span>h1 {
</span>  <span>background-image: linear-gradient(
</span>    <span>45deg,
</span>    <span>#ffb3ba,
</span>    <span>#c49c6e,
</span>    <span>#bfbf76,
</span>    <span>#77b084,
</span>    <span>#ff7e74,
</span>    <span>#3b82f6,
</span>    <span>#c084fc,
</span>    <span>#db2777
</span>   <span>);
</span><span>}
</span>

Le résultat est illustré dans la démo de codepen ci-dessous.

Voir le stylo
Animer une image d'arrière-plan sur le texte par SitePoint (@SitePoint)
sur codepen.

Essayez de désactiver l'arrière-plan-Clip: Texte et Text-Color: Transparent un instant si vous voulez voir ce qui se passe en arrière-plan.

Notre image d'arrière-plan se répète par défaut, ce qui ne semble pas trop mauvais pour cette image particulière. (Juste par intérêt, essayez d'ajouter du repère d'arrière-plan: pas de répétition pour voir ce qui se passe sans arrière Ensuite, utilisez la taille de l'arrière-plan pour agrandir l'image, comme nous l'avons fait avec l'arrière-plan du gradient ci-dessus. Par exemple:

<span>h1 {
</span>  <span>background-size: 300% 100%;
</span><span>}
</span>

Voici l'effet de faire cela sur notre démo florale.

Voir le stylo
Animer une image d'arrière-plan sur le texte: Step1a (expérience de taille d'arrière-plan) par SitePoint (@SitePoint)
sur codepen.

Conclusion

Nous pourrions faire des animations beaucoup plus spectaculaires que cela, mais le but était de rester simple ici. Vous pouvez approfondir les images clés et les animations CSS dans la façon de démarrer avec CSS Animation. Vous pouvez également jouer avec le timing de l'animation, l'angle du gradient et ainsi de suite.

Comme mentionné dans l'article précédent, amusez-vous avec cela, mais n'allez pas trop loin, car trop de ce type d'animation peut devenir ennuyeux. Un arrière-plan animé subtil sur une rubrique peut simplement ajouter cette touche d'intérêt ou d'intrigue dont vous avez besoin pour garder votre public engagé.

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!