Come fare un testo di lampeggiamento/lampeggiante con CSS
Durante lo sviluppo di un'applicazione Web, gli sviluppatori tendono sempre ad implementare efficacemente le proprietà di stile CSS. CSS fornisce diverse proprietà di stile, come colore, posizione, allineamenti e molti altri. Oltre a queste proprietà, ci consente di impostare l'azione di animazione su elementi. A tale scopo, il "@KeyFrameS"Le regole verranno utilizzate.
Questo articolo dimostrerà come possiamo creare testo lampeggiante/lampeggiante con CSS.
Come fare un testo lampeggiante con CSS?
Per far battere il testo, il CSS "opacità"Proprietà con il"@KeyFrames"La regola può essere applicata. Dai un'occhiata agli esempi seguenti.
Esempio 1: fare un testo lampeggiante
In HTML, aggiungi un ""Elemento e assegnarlo un"Blink in stile" classe. Successivamente, aggiungi un " Linuxhint Andiamo avanti a styling degli elementi HTML. Stile Div "Blink-Style" Il CSS "sfondo"La proprietà viene applicata all'elemento Div con la classe"Blink in stile". Elemento "H3" di stile L'HTML “ Applica "@KeyFrame regola" all'animazione "Blink-Text" Il nome dell'animazione "Blink-text"È specificato nella proprietà dell'animazione. IL "@KeyFrame"La regola viene aggiunta prima del nome di animazione che indica il comportamento di animazione a intervalli diversi come indicato di seguito: Produzione Esempio 2: fare un testo di lampeggiamento multiplo Per creare più testi lampeggianti nell'HTML, seguire i passaggi di seguito: "Element viene assegnata una classe"lampeggiante". Brilla brilla Stellina * Ora, controlla la sezione CSS per modellare l'HTML " Stile "Text-Div" Div IL ".testo-div"Viene utilizzato per accedere all'elemento. All'interno delle parentesi ricci, le seguenti proprietà CSS vengono applicate al “.testo-div ”: Classe "lampeggiante" di stile IL ".lampeggiante"Viene utilizzato per accedere all'HTML tag. Le seguenti proprietà sono implementate in questa classe: Applica "@KeyFrame Rule" all'animazione "in stile lampeggiante" Regola il comportamento di "stile lampeggiante"Animazione usando il"@KeyFrame" regole. All'inizio dell'animazione, l'opacità di testo sarà 0, indicando il livello di trasparenza completo degli elementi. Per fare l'animazione sul secondo ""Elemento leggermente diverso, la classe"uno"È dichiarato con i seguenti stili di animazione: Classe "One" Style Produzione Abbiamo imparato efficacemente come creare il testo lampeggiante usando diverse proprietà di stile CSS. Conclusione In HTML, vengono utilizzate diverse proprietà CSS per far lampeggiare lo stile di testo. IL "animazione" E "opacità"Le proprietà sono comunemente definite in questo contesto. Per regolare il comportamento lampeggiante, il "@KeyFrame"La regola è dichiarata per una proprietà di animazione. Questo articolo ha spiegato come creare testo lampeggiante o lampeggiante in HTML usando CSS. .Blink in stile
Background: RGB (0, 0, 0);H3
Testo-align: centro;
Font-Family: Verdana;
Colore: #FFC310;
Animazione: BLINK-TEXT 1.9S Linear Infinite;
Font-size: 6em;
@KeyFrames Blink-text
0%
opacità: 0;
50%
opacità: 1;
100%
opacità: 0;
.text-div
larghezza: 400px;
Margine: auto;
Background-color: RGB (42, 49, 49);
imbottitura: 8px;
.lampeggiante
Colore: giallo;
Font-size: 40px;
Font-Family: corsivo;
Font-weight: audace;
Animazione: stile lampeggiante 0.6S Linear Infinite;
@KeyFrames in stile flashing
0%
opacità: 0;.uno
Animazione: 1S Linear Infinite;
@KeyFrames One
50%
opacità: 0;