Nous utilisons le texte clignotant lorsque nous voulons attirer l'attention du public. Cela aide beaucoup à attirer l'attention de l'utilisateur lorsque nous avons une information importante ou une nouvelle mise à jour sur quoi que ce soit pour l'utilisateur. Nous utilisons le texte clignotant donc lorsque les utilisateurs utilisent les sites Web ou passons par n'importe quelle page où il / elle veut obtenir la mise à jour sans perdre son temps à rechercher, il obtient la mise à jour ou les informations importantes facilement s'il y a un clignotement Texte sur cette page. Comme nous pouvons le voir sur les sites Web d'achat, lorsqu'il y a une vente ou une remise ou quelque chose de nouveau sur ce site Web, ils créent ces informations dans le formulaire de texte clignotant. Faire clignoter le texte attirera facilement l'attention de l'utilisateur sur ces informations. Le texte clignotant est quelque chose qui s'estompe lentement pendant quelques secondes puis revient à son texte d'origine. Nous expliquerons comment ajouter le texte clignotant en utilisant CSS dans ce tutoriel.

Exemple 1

Pour faire clignoter notre texte, nous devons créer un fichier HTML et écrire du texte dessus. Nous ajoutons l'effet clignotant sur ce texte en utilisant les propriétés CSS.

Dans le code HTML, nous avons écrit une seule ligne à l'intérieur de «Div» comme ruban adhésif 2 «H2» et appliquée les propriétés de CSS pour faire de ce texte un texte clignotant. Voir le code CSS ci-dessous et vous saurez comment ajouter l'effet clignotant en utilisant les propriétés CSS.

Code CSS:

Nous avons réglé le corps «marge» et «rembourrage» sur «0». Ensuite, nous utilisons la position centrale absolue sur «div». Nous définissons la propriété «position» sur «absolu». Nous avons réglé le «haut» et la «gauche» à «50%». Vient ensuite la propriété «Transform-Translate» du CSS qui transforme le texte à la moitié de sa largeur et de sa hauteur. Il est utilisé pour inverser le texte à «50%» à la moitié de sa largeur et à «50%» à la moitié de sa hauteur.

Après cela, nous utilisons les propriétés de style de CSS pour changer le style du «H2». Nous avons réglé la taille de la police de «H2» sur «5EM» et la «Font-Family» à «Serif». La couleur que nous sélectionnons pour cela est la couleur «verte» et le code pour cela est «# 008000». Cette rubrique est alignée dans le «centre». L'élément principal est d'ajouter la propriété «Animation» sur ce «H2». Cette propriété «Animation» devrait animer pour «2.0sec "et" linéaire infini ". L'infini linéaire est utilisé pour que cette animation commence lentement puis se transforme en un peu plus rapidement. Le sélecteur «@keyframe» est utilisé pour fournir le texte clignotant avec la valeur d'opacité. Nous définissons la valeur d'opacité à la fin du code CSS.

Sortir:

Le texte est affiché dans la vidéo suivante. Lorsque vous exécutez le code précédent fourni, vous verrez que le texte que vous avez écrit dans votre fichier HTML clignote. Lire cette vidéo et vous pouvez voir que le texte clignote.

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / document-profile-1-microsoft -edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Utilisez les touches de flèches UP / Down pour augmenter ou diminuer le volume.

Exemple n ° 2

Nous allons démontrer un autre code ici afin que vous appreniez facilement ce concept de texte clignotant dans CSS.

Nous utilisons la classe «Span» ici et définissons le nom sur «clignoter». Nous écrivons une ligne simple ici qui est «Suis-je en train de clignoter» et utilisons l'effet clignotant sur ce texte en utilisant la propriété d'animation CSS.

Code CSS:

Tout d'abord, nous définissons le texte sur la position centrale absolue, ce qui signifie que le texte apparaîtra au centre de l'écran. Ici, vous pouvez voir que la «position» est «absolue». Le «haut» et le «bas» sont définis sur «50%» et la propriété «Transform-Translate» est définie sur «-50%, -50%». Nous utilisons le nom de classe de «Span» qui est «clignotant». Et appliquer le style et l'effet «d'animation» au texte. Nous avons défini la «taille de police» de ce texte à «4EM». La «Font-Family» que nous utilisons pour ce texte est définie sur «Algérien».

La couleur du texte est définie sur «vert». L'alignement du texte est défini sur le «centre» de l'écran. La propriété «Animation» applique l'effet clignotant au texte. Le texte clignotant s'anime pour «2.0S "et" Infinite ". Le «@keyframes» est de donner l'opacité de couleur au texte clignotant. Tout d'abord, réglez-le sur «0%» et «49%» pour la couleur «noir». Le «60%» est réglé sur la couleur transparente, «99%» transparente et «100%» noir. La sortie est affichée dans la vidéo suivante.

Sortir:

Dans cette vidéo donnée, vous remarquerez que le texte clignote. Cette sortie donnée est rendue sur le navigateur. Le texte clignotant attire l'attention de l'utilisateur.

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / document-profile-1-microsoft -edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Utilisez les touches de flèches UP / Down pour augmenter ou diminuer le volume.

Exemple n ° 3

Dans cet exemple, nous écrivons les paragraphes dans le code HTML et utilisons la propriété «Animation» sur ces paragraphes afin que les paragraphes clignotent lorsque nous obtenons la sortie.

Ici, nous avons le titre 1 "

«Où nous écrivons le titre que nous voulons afficher. Ensuite, nous créons une classe nommée «A1» de «P» et écrivons un paragraphe. De plus, nous créons un autre paragraphe en utilisant le nom de classe «A2» d'un autre «P». Nous donnons ces noms à la classe «P» afin que nous puissions les utiliser dans le code CSS pour le style.

Code CSS:

Tout d'abord, nous appliquons le style à la tête. Nous utilisons la couleur «orange» pour la police ou le texte écrit à l'intérieur de l'en-tête. L'en-tête est «aligné» sur le «centre» de l'écran de sortie. La famille du texte ou de la police est réglée sur «Algérien», de sorte que la rubrique s'affiche dans le style «algérien». Nous animons le texte afin que les paragraphes clignotent à l'écran. Nous utilisons la même propriété que nous utilisons dans notre exemple précédent pour faire clignoter le texte. Cette propriété est la propriété «d'animation». Il anime ou clignote pour «2s» (deux secondes).

La taille du texte dans le paragraphe est «25px». Ces paragraphes sont alignés sur le «centre». Le texte du paragraphe est défini sur «italique». Encore une fois, nous avons le «@keyframe» que nous avons expliqué dans nos exemples précédents. Regardez la vidéo donnée pour la sortie de cet exemple.

Sortir:

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / document-profile-1-microsoft -edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Utilisez les touches de flèches UP / Down pour augmenter ou diminuer le volume.

Dans la vidéo précédente, vous pouvez voir que le texte de titre ne clignote pas parce que nous n'avons pas utilisé l'effet clignotant ou la propriété d'animation sur le titre. C'est pourquoi le texte de titre est encore en forme. Mais les paragraphes en dessous du cap clientent et le style de ces paragraphes est différent de la rubrique.

Conclusion

Dans ce tutoriel, nous avons expliqué l'effet clignotant dans CSS et appliqué cet effet clignotant à notre texte à l'aide de la propriété «Animation» CSS. Ce texte clignotant est utilisé pour attirer l'attention de l'utilisateur. Vous remarquerez peut-être que lorsque le texte clignote, nos yeux se déplacent automatiquement vers ce texte. Dans ce tutoriel, nous avons fourni les vidéos du texte clignotant. Après avoir regardé ces sorties vidéo, vous comprendrez ce que signifient les clignotements. Vous apprendrez comment le texte clignote et comment nous utilisons la propriété «Animation» et définissez le temps de clignotement dans le texte pour faire clignoter le texte après une étude approfondie de ce tutoriel.