Effet de texte enflammé animé en CSS

A l’approche de la Toussaint, ou pour tout autre projet, vous souhaitez mettre en place un effet enflammé sur votre texte. Vous pouvez donner un effet enflammé animé à votre texte grâce aux CSS.

Démo et Code / Fichier code

Quelques éclaircissements sur le code css proposé ci-dessus dans les liens :

• background-color:#222;– Règle l’arrière-plan de l’ensemble du corps sur une teinte sombre pour plus de contraste.
• .fire– Cible la classe de notre élément, ce qui nous permet de styliser notre texte.
• color: #f5f5f5;– Définit la couleur de notre texte sur un gris clair pour une meilleure visibilité sur le fond sombre.
• text-align:center;– Nous alignons le texte au centre de la page.
• font-family: 'Courier New', Courier, monospace;– Nous définissons la police et choisissons une police monospace pour son uniformité et sa simplicité.
• font-size: 80px;– Définit la taille du texte pour qu’elle soit grande et visible.
• text-shadowc’est dans cette propriété que la magie opère. Cela crée plusieurs couches d’ombres de différentes couleurs, que nous percevons comme un effet de flamme. Les couleurs vont du blanc (la partie la plus chaude d’une flamme) au rouge (la plus froide), simulant un dégradé de flamme réaliste.
• @keyframes flicker– Ici, nous déclarons l’animation avec le nom « flicker ». Tout ce qui est entouré d’accolades {}définit la progression de l’animation.
• 0%, 100% {...}et 50% {...}– Ce sont les images clés de l’animation. Ils précisent l’état de l’animation à des moments précis. Au début et à la fin de l’animation (0% et 100%), l’ombre du texte a un rayon de flou plus petit, et au milieu (50%), le rayon de flou est plus grand. Cette variation donne l’illusion d’une flamme vacillante.
• .fire { animation: flicker 2s infinite; }– Cela applique notre animation à la classe .fire. flickerest le nom de l’animation, 2sest la durée d’un cycle et infinitesignifie qu’elle se répétera indéfiniment.

A vous de jouer !