Cara Membuat Teks Berkedip/Berkedip Dengan CSS

” elemen untuk menentukan tajuk di antara elemen div:

---

---

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

Mari beralih ke gaya elemen HTML.

Gaya div 'gaya berkedip'.

.blink-style {
latar belakang: rgb ( 0 , 0 , 0 ) ;
}

CSS “ Latar Belakang Properti ” diterapkan pada elemen div dengan kelas “ gaya berkedip ”.

Elemen gaya 'h3'.

h3 {
perataan teks: tengah;
font-family: Verdana;
warna: #ffc310;
animasi: teks berkedip 1,9 detik linier tak terbatas;
ukuran font: 6em;
}

HTML-nya

” didekorasi dengan properti CSS berikut:

• “ perataan teks ” properti mengatur perataan teks elemen.
• “ font-family ” mendefinisikan gaya font untuk teks.
• “ warna ” digunakan untuk mewarnai teks elemen.
• “ animasi ” adalah properti singkatan yang menentukan nama animasi, durasi animasi, fungsi pengaturan waktu animasi, dan nilai properti penghitungan iterasi-animasi.
• “ ukuran huruf ” menyesuaikan ukuran font terutama dalam satuan 'px' dan 'em'.

Terapkan '@keyframe rule' ke animasi 'blink-text'.

@ keyframes berkedip-teks {
0 % {
kegelapan: 0 ;
}
lima puluh % {
kegelapan: satu ;
}
100 % {
kegelapan: 0 ;
}

Nama animasi “ berkedip-teks ” ditentukan dalam properti animasi. “ @keyframe Aturan ” ditambahkan sebelum nama animasi yang menandakan perilaku animasi pada interval yang berbeda seperti yang disebutkan di bawah ini:

• Pada ' 0% ”, opacity teks diatur sebagai 0.
• Pada ' lima puluh% ”, opacity teks diatur ke 1.
• Pada ' 100% ” animasi, opacity teks diatur ke 0.

Keluaran

Contoh 2: Membuat Banyak Teks Berkedip

Untuk membuat banyak teks berkedip dalam HTML, ikuti langkah-langkah yang diberikan di bawah ini:

• Pertama, tempatkan “
  ' elemen dan berikan kelas ' teks-div ”.
• Kemudian, tambahkan dua '

  ” elemen untuk menyertakan beberapa teks.

• Elemen “

  ” pertama diberi kelas “ berkedip ”.

• Yang kedua diberi dua kelas, “ berkedip ' dan ' satu ”. Kedua kelas diakses di CSS untuk mendeklarasikan properti styling:

< div kelas = 'teks-div' >
< p kelas = 'berkedip' > Kelap kelip p >
< p kelas = 'berkedip satu' > Bintang kecil * p >
div >

Sekarang, periksa bagian CSS untuk menata HTML “

” elemen.

Gaya div 'teks-div'.

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

“ .text-div ” digunakan untuk mengakses elemen

. Di dalam kurung kurawal, properti CSS berikut diterapkan ke '.text-div':

• “ lebar ” properti menyesuaikan lebar elemen.
• “ batas ” menambah ruang di sekitar elemen.
• “ warna latar belakang ” mengatur warna latar belakang.
• “ lapisan ” menghasilkan ruang di dalam batas elemen.

Kelas gaya 'berkedip'.

.berkedip {
warna: kuning;
ukuran font: 40px;
font-family: kursif;
font-berat: tebal;
animasi: flashing-style 0.6s linear infinite;
}

“ .berkedip ” digunakan untuk mengakses tag HTML

. Properti berikut diimplementasikan di kelas ini:

• “ font-berat ” menunjukkan ketebalan font.
• Properti lainnya dijelaskan pada bagian di atas.

Terapkan “@keyframe rule” ke animasi “flashing-style”.

@ keyframes berkedip-gaya {
0 % {
kegelapan: 0 ;
}
}

Sesuaikan perilaku “ gaya berkedip ” animasi menggunakan “ @keyframe ' aturan. Di awal animasi, opasitas teks akan menjadi 0, menunjukkan tingkat transparansi lengkap elemen.

Untuk membuat animasi pada yang kedua “

'elemennya sedikit berbeda, kelasnya' satu ” dideklarasikan dengan gaya animasi berikut:

Kelas gaya 'satu'.

.satu {
animasi: satu 1s linier tak terbatas;
}
@ keyframe satu {
lima puluh % {
kegelapan: 0 ;
}
}

Keluaran

Kami telah secara efektif mempelajari cara membuat teks berkedip menggunakan properti gaya CSS yang berbeda.

Kesimpulan

Dalam HTML, beberapa properti CSS digunakan untuk membuat gaya teks berkedip. The “ animasi ' dan ' kegelapan ” properti umumnya didefinisikan dalam konteks ini. Untuk menyesuaikan perilaku berkedip, tombol “ @keyframe ” aturan dideklarasikan untuk properti animasi. Artikel ini telah menjelaskan cara membuat teks berkedip atau berkedip di HTML menggunakan CSS.