Comment faire clignoter/clignoter du texte avec CSS

” élément pour spécifier un en-tête entre l'élément div :

---

---

< div classer = 'style clignotant' >
< h3 > Linux h3 >
div >

Passons au style des éléments HTML.

Style 'style clignotant' div

style .blink {
arrière-plan : RVB ( 0 , 0 , 0 ) ;
}

Le SSC ' Contexte La propriété ' est appliquée à l'élément div avec la classe ' style clignotant ”.

Élément de style 'h3'

h3 {
aligner le texte : centrer ;
famille de polices : Verdana ;
Couleur: #ffc310;
animation : texte clignotant 1,9 s linéaire infini ;
taille de police : 6em ;
}

Le HTML '

” est décoré avec les propriétés CSS suivantes :

• ' aligner le texte ” La propriété définit l'alignement du texte de l'élément.
• ' famille de polices ” définit un style de police pour le texte.
• ' Couleur ” est utilisé pour colorer le texte de l'élément.
• ' animation ” est la propriété abrégée qui spécifie le nom de l'animation, la durée de l'animation, la fonction de synchronisation de l'animation et les valeurs de la propriété animation-iteration-count.
• ' taille de police » La propriété ajuste la taille de la police principalement en unités « px » et « em ».

Appliquer la 'règle @keyframe' à l'animation 'texte clignotant'

@ images clés texte clignotant {
0 % {
opacité: 0 ;
}
cinquante % {
opacité: un ;
}
100 % {
opacité: 0 ;
}

Le nom de l'animation ' texte clignotant ” est spécifié dans la propriété animation. Les ' @image clé ” règle est ajoutée avant le nom de l'animation qui signifie le comportement de l'animation à différents intervalles comme mentionné ci-dessous :

• À ' 0% ” animation, l'opacité du texte est définie sur 0.
• À ' cinquante% ” animation, l'opacité du texte est définie sur 1.
• À ' 100% ” animation, l'opacité du texte est définie sur 0.

Sortir

Exemple 2 : création de plusieurs textes clignotants

Pour créer plusieurs textes clignotants dans le HTML, suivez les étapes ci-dessous :

• Tout d'abord, placez un '
  ' élément et attribuez-lui une classe ' text-div ”.
• Ensuite, ajoutez deux '

  ” éléments pour inclure du texte.

• Le premier élément «

  » se voit attribuer une classe « clignotant ”.

• Le second se voit attribuer deux classes, ' clignotant ' et ' un ”. Les deux classes sont accessibles dans le CSS pour déclarer les propriétés de style :

< div classer = 'text-div' >
< p classer = 'clignotant' > Scintille scintille p >
< p classer = 'un clignotant' > Petite étoile * p >
div >

Maintenant, consultez la section CSS pour styliser le HTML '

' éléments.

Style 'text-div' div

.text-div {
largeur : 400 pixels ;
marge : voiture ;
couleur de fond : rvb ( 42 , 49 , 49 ) ;
rembourrage : 8px ;
}

Les ' .text-div ” est utilisé pour accéder à l'élément

. Entre les accolades, les propriétés CSS suivantes sont appliquées au '.text-div':

• ' largeur ” La propriété ajuste la largeur de l'élément.
• ' marge ” ajoute de l'espace autour de l'élément.
• ' Couleur de l'arrière plan ” définit la couleur d'arrière-plan.
• ' rembourrage ” produit de l'espace dans les limites de l'élément.

Classe de style 'clignotant'

.clignotant {
Couleur jaune;
taille de police : 40 px ;
famille de polices : cursive ;
font-weight : gras ;
animation : infini linéaire de 0,6 s de style clignotant ;
}

Les ' .clignotant ” est utilisé pour accéder aux balises HTML

. Les propriétés suivantes sont implémentées dans cette classe :

• ' poids de la police ” indique l'épaisseur de la police.
• D'autres propriétés sont expliquées dans la section ci-dessus.

Appliquer la 'règle @keyframe' à l'animation 'de style clignotant'

@ images clés de style clignotant {
0 % {
opacité: 0 ;
}
}

Ajustez le comportement de ' style clignotant ' animation en utilisant le ' @image clé ' des règles. Au début de l'animation, l'opacité du texte sera de 0, indiquant le niveau de transparence complet des éléments.

Pour faire l'animation sur la seconde '

« élément légèrement différent, la classe » un ” est déclaré avec les styles d'animation suivants :

Style 'une' classe

.un {
animation : un 1s linéaire infini ;
}
@ images clés un {
cinquante % {
opacité: 0 ;
}
}

Sortir

Nous avons effectivement appris à créer le texte clignotant en utilisant différentes propriétés de style CSS.

Conclusion

En HTML, plusieurs propriétés CSS sont utilisées pour faire clignoter le style de texte. Les ' animation ' et ' opacité ” les propriétés sont généralement définies dans ce contexte. Pour régler le comportement de clignotement, le ' @image clé ” règle est déclarée pour une propriété d'animation. Cet article a expliqué comment faire clignoter ou clignoter du texte en HTML à l'aide de CSS.