Comment Créer un Effet d’animation de Texte Brillant

L’utilisation des effets de texte est toujours une bonne idée, car ils rendent votre site Web attrayant et intéressant pour les visiteurs. Si vous voulez apprendre un nouvel effet pour vos textes lisez notre snippet et créez un effet d’animation de texte brillant.

Maintenant créons-en un ensemble.

1. Créez HTML

Placez votre texte dans une balise HTML <p>, qui définit un paragraphe de texte.

<p>Texte brillant.</p>

2. Ajoutez CSS

Commençons à styliser la balise HTML <body>.

Mettez la propriété CSS margin, qui crée un espace autour de l’élément en choisissant sa valeur initiale ”0”.
Utilisez la propriété CSS padding, pour créer de l’espace autour du contenu de l’élément.
Mettez la propriété CSS display, qui définit le type de la boîte, qui est utilisée pour un élément HTML, et choisissez la valeur “flex”, qui affiche un élément comme un conteneur block-level-flex.
C'est la tour de la propriété CSS justify-content, qui aligne les éléments lorsqu'il n'utilisent pas tout l'espace disponible horizontalement et choisissez la valeur “center” pour placer l'élément au centre du conteneur.
Utilisez la propriété CSS align-items, qui définit l’alignement par défaut pour les éléments flex en choisissant sa valeur “center”.
À l’aide de la propriété CSS background-color mettez la couleur de fond que vous préférez.

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
}

On va maintenant styliser le texte.

Positionnez votre texte à l’aide de la propriété CSS position en choisissant sa valeur “relative”.
Choisissez la taille et la police en utilisant les propriétés CSS font-size et font-family.
Si vous voulez donner à votre texte un effet de gradient, vous devez utiliser la fonction de “linear-gradient” à l’aide de la propriété CSS background.

Pour créer un “linear-gradient”, vous devez définir au moins deux arrêts de couleur.

Donnez une taille à votre image de fond en utilisant la propriété CSS background-size.
Mettez la propriété CSS animation, pour animer votre texte et définissez la valeur “infinite” afin de faire jouer l’animation sans fin.
Utilisez la propriété CSS background-clip, qui spécifie la distance entre la couleur de l’arrière-plan et l’image de l’arrière-plan en choisissant la valeur “text”.
Mettez la propriété CSS background-repeat et choisissez sa valeur par défaut “no-repeat”, où l’image de fond est répétée horizontalement et verticalement.
Utilisez la propriété CSS text-fill-color, pour spécifier la couleur de remplissage des caractères de votre texte.

p {
  position: relative;
  font-family: Impact, sans-serif;
  font-size: 45px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #90ee90, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 5s infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

La dernière étape est de faire fonctionner notre animation. C’est fait à l’aide de Règle CSS @keyframes, qui permet de spécifier ce qui doit passer aux moments spécifiques pendant l'animation.

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

Maintenant, essayons quelques exemples.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000000;
      }
      p {
        position: relative;
        font-family: Impact, sans-serif;
        font-size: 45px;
        letter-spacing: 2px;
        background: linear-gradient(90deg, #90ee90, #fff, #000);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 5s infinite;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0);
      }
      @keyframes animate {
        0% {
          background-position: -500%;
        }
        100% {
          background-position: 500%;
        }
      }
    </style>
  </head>
  <body>
    <p>Texte brillant.</p>
  </body>
</html>

Essayez-vous-même!

Vous pouvez changer les couleurs de votre texte à l’aide de la propriété CSS background comme vous souhaitez, mais ne changez pas le degré, car il est responsable de l’effet brillant.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000000;
      }
      p {
        position: relative;
        font-family: Geneva, sans-serif;
        font-size: 60px;
        text-transform: uppercase;
        letter-spacing: 2px;
        background: linear-gradient(90deg, #dc143c, #fff, #000);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 3s infinite;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0);
      }
      @keyframes animate {
        0% {
          background-position: -500%;
        }
        100% {
          background-position: 500%;
        }
      }
    </style>
  </head>
  <body>
    <p>Texte brillant</p>
  </body>
</html>

Essayez-vous-même!