Usiamo il testo lampeggiante quando vogliamo attirare l'attenzione del pubblico. Aiuta molto ad attirare l'attenzione dell'utente quando abbiamo informazioni importanti o qualche nuovo aggiornamento su qualsiasi cosa per l'utente. Usiamo il testo lampeggiante, quindi quando gli utenti utilizzano i siti Web o passano attraverso qualsiasi pagina in cui vuole ottenere l'aggiornamento senza perdere tempo a cercare il suo tempo, ottiene facilmente l'aggiornamento o le informazioni importanti se c'è un lampeggiante testo su quella pagina. Come possiamo vedere sui siti Web di shopping, quando c'è una vendita o qualche sconto o qualcosa di nuovo su quel sito Web, creano queste informazioni nel modulo di testo lampeggiante. Creare il testo lempeggono facilmente l'attenzione dell'utente verso tali informazioni. Il testo lampeggiante è qualcosa che svanisce lentamente per alcuni secondi e poi torna al suo testo originale. Spiegheremo come aggiungere il testo lampeggiante usando CSS in questo tutorial.

Esempio 1

Per far battere le palpebre, dobbiamo creare un file HTML e scrivere un po 'di testo su di esso. Aggiungiamo l'effetto lampeggiante su questo testo usando le proprietà CSS.

Nel codice HTML, abbiamo scritto una singola riga all'interno di "Div" come intestazione 2 "H2" e applicare le proprietà di CSS per rendere questo testo un testo lampeggiante. Vedi il codice CSS qui sotto e saprai come aggiungere l'effetto lampeggiante usando le proprietà CSS.

Codice CSS:

Abbiamo impostato il corpo "margine" e "imbottitura" su "0". Quindi usiamo la posizione centrale assoluta su "div". Abbiamo impostato la proprietà "posizione" su "assoluto". Abbiamo impostato la "parte superiore" e "a sinistra" su "50%". Poi arriva la proprietà "trasformata-traslate" del CSS che trasforma il testo alla metà della sua larghezza e altezza. Viene utilizzato per invertire il testo a "50%" alla metà della sua larghezza e "50%" alla metà della sua altezza.

Dopo questo, usiamo le proprietà di stile del CSS per cambiare lo stile di "H2". Abbiamo impostato la dimensione del carattere di "H2" su "5em" e la "famiglie di carattere" su "Serif". Il colore che selezioniamo per questo è il colore "verde" e il codice per questo è "#008000". Questa intestazione è allineata nel "centro". L'elemento principale è aggiungere la proprietà "animazione" su questo "H2". Questa proprietà "animazione" è impostata per animare per "2.0sec "e" lineare infinito ". L'infinito lineare viene utilizzato in modo che questa animazione inizia lentamente e poi si trasforma in un po 'più veloce. Il selettore "@KeyFrame" viene utilizzato per fornire il testo lampeggiante insieme al valore di opacità. Impostiamo il valore di opacità alla fine del codice CSS.

Produzione:

Il testo è mostrato nel seguente video. Quando si esegue il codice precedente fornito, vedrai che il testo che hai scritto nel tuo file HTML è lampeggiante. Riproduci questo video e puoi vedere che il testo sta lampeggiando.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/Document-Profile-1-Microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Up/giù tasti freccia per aumentare o diminuire il volume.

Esempio n. 2

Dimostreremo un altro codice qui in modo che imparerai facilmente questo concetto di testo di sbattere le palpebre in CSS.

Usiamo la classe "Span" qui e impostiamo il nome su "lampeggiare". Scriviamo una semplice linea qui che è "Sto sbattendo le palpebre" e usiamo l'effetto lampeggiante su questo testo usando la proprietà dell'animazione CSS.

Codice CSS:

Innanzitutto, impostiamo il testo sulla posizione centrale assoluta, il che significa che il testo apparirà al centro dello schermo. Qui, puoi vedere che la "posizione" è "assoluta". "Top" e "Bottom" è impostato sul "50%" e la proprietà "trasformata-translata" è impostata su "-50%, -50%". Usiamo il nome di classe di "span" che è "lampeggiante". E applicare l'effetto di stile e "animazione" sul testo. Abbiamo impostato la "dimensione del carattere" di questo testo su "4em". La "famiglia di carattere" che utilizziamo per questo testo è impostata su "Algerian".

Il colore del testo è impostato su "verde". L'allineamento del testo è impostato sul "centro" dello schermo. La proprietà "Animazione" applica l'effetto lampeggiante al testo. Il testo lampeggiante si anima per “2.0s "e" infinito ". Il "@KeyFrames" è dare l'opacità del colore al testo lampeggiante. Innanzitutto, impostalo su "0%" e "49%" per il colore "nero". Il "60%" è impostato sul colore trasparente, "99%" trasparente e "100%" nero. L'output è mostrato nel seguente video.

Produzione:

In questo video dato, noterai che il testo lampeggia. Questo dato output è reso sul browser. Il testo lampeggiante riceve l'attenzione dell'utente.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/Document-Profile-1-Microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Up/giù tasti freccia per aumentare o diminuire il volume.

Esempio n. 3

In questo esempio, scriviamo i paragrafi nel codice HTML e utilizziamo la proprietà "animazione" in questi paragrafi in modo che i paragrafi lampeggi quando otteniamo l'output.

Qui, abbiamo l'intestazione 1 "

"Dove scriviamo l'intestazione che vogliamo visualizzare. Quindi, creiamo una classe chiamata "A1" di "P" e ci scriviamo un paragrafo. Inoltre, creiamo un altro paragrafo usando il nome di classe "A2" di un'altra "P". Diamo questi nomi alla classe "P" in modo da poterli usare nel codice CSS per lo styling.

Codice CSS:

Innanzitutto, applichiamo lo stile all'intestazione. Usiamo il colore "arancione" per il carattere o il testo scritto all'interno dell'intestazione. L'intestazione è "allineata" al "centro" della schermata di uscita. La famiglia del testo o del carattere è impostata su "algerina" in modo che l'intestazione mostri in stile "algerino". Animamo il testo in modo che i paragrafi lampeggi sullo schermo. Usiamo la stessa proprietà che utilizziamo nel nostro esempio precedente per farmpelersi il testo. Questa proprietà è la proprietà "animazione". Anima o lampeggia per "2s" (due secondi).

La dimensione del testo nel paragrafo è "25px". Questi paragrafi sono allineati al "centro". Il testo del paragrafo è impostato su "corsivo". Ancora una volta, abbiamo il "@keyframe" che abbiamo spiegato nei nostri esempi precedenti. Guarda il video dato per l'output di questo esempio.

Produzione:

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/Document-Profile-1-Microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Up/giù tasti freccia per aumentare o diminuire il volume.

Nel video precedente, puoi vedere che il testo dell'intestazione non è lampeggiante perché non abbiamo usato l'effetto lampeggiante o la proprietà dell'animazione sull'intestazione. Questo è il motivo per cui il testo di intestazione è ancora in forma. Ma i paragrafi sotto il battito dell'intestazione e lo stile di questi paragrafi sono diversi dall'intestazione.

Conclusione

In questo tutorial, abbiamo spiegato l'effetto lampeggiante in CSS e applicato questo effetto lampeggiante al nostro testo usando la proprietà "Animazione" CSS. Questo testo lampeggiante viene utilizzato per attirare l'attenzione dell'utente. Potresti notare che quando il testo lampeggia, i nostri occhi si muovono automaticamente verso quel testo. In questo tutorial, abbiamo fornito i video del testo lampeggiante. Dopo aver visto questi output video, capirai cosa significano lempeggi. Imparerai come il testo lampeggia e come utilizziamo la proprietà "animazione" e impostiamo il tempo di lampeggiare nel testo per farmpelersi il testo dopo uno studio approfondito di questo tutorial.