Cara Membuat Teks Berkelip/Berkelip Dengan CSS

” elemen untuk menentukan tajuk antara elemen div:

---

---

< div kelas = 'gaya kejap' >
< h3 > Linux h3 >
div >

Mari kita bergerak ke hadapan untuk menggayakan elemen HTML.

Gaya div 'gaya berkelip'.

.gaya kejap {
latar belakang: rgb ( 0 , 0 , 0 ) ;
}

CSS ' latar belakang ' harta digunakan pada elemen div dengan kelas ' ala-ala kejap ”.

Gaya Elemen 'h3'.

h3 {
text-align: tengah;
font-family: Verdana;
warna: #ffc310;
animasi: teks berkelip 1.9s linear tak terhingga;
saiz fon: 6em;
}

HTML '

” elemen dihiasi dengan sifat CSS berikut:

• “ penjajaran teks sifat ” menetapkan penjajaran teks elemen.
• “ font-family ” mentakrifkan gaya fon untuk teks.
• “ warna ” digunakan untuk mewarnakan teks elemen.
• “ animasi ” ialah sifat trengkas yang menentukan nama animasi, tempoh animasi, fungsi pemasaan animasi dan nilai sifat kiraan lelaran animasi.
• “ Saiz huruf sifat ” melaraskan saiz fon terutamanya dalam unit “px” dan “em”.

Gunakan 'peraturan@keyframe' pada animasi 'blink-text'.

@ bingkai kunci teks berkelip {
0 % {
kelegapan: 0 ;
}
lima puluh % {
kelegapan: satu ;
}
100 % {
kelegapan: 0 ;
}

Nama animasi ' teks kejap ” dinyatakan dalam sifat animasi. ' @keyframe Peraturan ” ditambah sebelum nama animasi yang menandakan tingkah laku animasi pada selang masa yang berbeza seperti yang dinyatakan di bawah:

• Pada ' 0% ” animasi, kelegapan teks ditetapkan sebagai 0.
• Pada ' lima puluh% ” animasi, kelegapan teks ditetapkan kepada 1.
• Pada ' 100% ” animasi, kelegapan teks ditetapkan kepada 0.

Pengeluaran

Contoh 2: Membuat Teks Berbilang Berkelip

Untuk membuat berbilang teks berkelip dalam HTML, ikuti langkah yang diberikan di bawah:

• Pertama, letakkan '
  'elemen dan berikannya kelas' teks-div ”.
• Kemudian, tambah dua '

  ” elemen untuk memasukkan beberapa teks.

• Elemen '

  ' pertama diberikan kelas ' berkelip-kelip ”.

• Yang kedua diberikan dua kelas, ' berkelip-kelip ” dan “ satu ”. Kedua-dua kelas diakses dalam CSS untuk mengisytiharkan sifat penggayaan:

< div kelas = 'text-div' >
< hlm kelas = 'berkelip' > Twinkle Twinkle hlm >
< hlm kelas = 'yang berkelip' > Bintang Kecil * hlm >
div >

Sekarang, lihat bahagian CSS untuk menggayakan HTML “

” unsur.

Gaya div 'teks-div'.

.text-div {
lebar: 400px;
margin: kereta;
warna latar belakang: rgb ( 42 , 49 , 49 ) ;
padding: 8px;
}

' .text-div ” digunakan untuk mengakses elemen

. Dalam kurungan kerinting, sifat CSS berikut digunakan pada '.text-div':

• “ lebar ” harta melaraskan lebar elemen.
• “ margin ” menambah ruang di sekeliling elemen.
• “ warna latar belakang ” menetapkan warna latar belakang.
• “ padding ” menghasilkan ruang dalam sempadan unsur.

Gaya kelas 'berkelip'.

.berkelip {
warna: kuning;
saiz fon: 40px;
font-family: kursif;
font-weight: tebal;
animasi: gaya berkelip 0.6s linear tak terhingga;
}

' .berkelip ” digunakan untuk mengakses teg HTML

. Sifat berikut dilaksanakan dalam kelas ini:

• “ berat fon ” menunjukkan ketebalan fon.
• Ciri-ciri lain dijelaskan dalam bahagian di atas.

Gunakan 'peraturan@keyframe' pada animasi 'gaya berkelip'.

@ bingkai kunci gaya berkelip {
0 % {
kelegapan: 0 ;
}
}

Laraskan tingkah laku “ gaya berkelip animasi menggunakan ' @keyframe ” peraturan. Pada permulaan animasi, kelegapan teks akan menjadi 0, menunjukkan tahap ketelusan lengkap elemen.

Untuk membuat animasi pada kedua '

'elemen berbeza sedikit, kelas' satu ” diisytiharkan dengan gaya animasi berikut:

Gaya 'satu' kelas

.satu {
animasi: satu 1s linear tak terhingga;
}
@ bingkai utama satu {
lima puluh % {
kelegapan: 0 ;
}
}

Pengeluaran

Kami telah belajar dengan berkesan cara membuat teks berkelip menggunakan sifat penggayaan CSS yang berbeza.

Kesimpulan

Dalam HTML, beberapa sifat CSS digunakan untuk membuat gaya teks berkelip. ' animasi ” dan “ kelegapan ” sifat lazimnya ditakrifkan dalam konteks ini. Untuk melaraskan tingkah laku berkelip, ' @keyframe peraturan ” diisytiharkan untuk sifat animasi. Artikel ini telah menerangkan cara membuat teks berkelip atau berkelip dalam HTML menggunakan CSS.