Petua dan kaedah menggunakan CSS untuk mencapai kesan kabur apabila tetikus melayang

Petua dan kaedah menggunakan CSS untuk mencapai kesan kabur pada tuding tetikus

Dalam reka bentuk web moden, kesan dinamik adalah penting untuk menarik perhatian pengguna dan meningkatkan pengalaman pengguna. Kesan alih tetikus ialah salah satu daripada kesan interaktif biasa yang boleh menjadikan tapak web lebih jelas dan menarik perhatian. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan kabur apabila tetikus melayang, dan memberikan contoh kod khusus.

1. Gunakan atribut penapis CSS untuk menetapkan kesan kabur

Dalam CSS3, kita boleh menggunakan atribut penapis untuk mencapai pelbagai kesan khas imej, termasuk kesan kabur. Pertama, kita perlu menentukan kelas CSS untuk menerangkan kesan khas apabila tetikus melayang. Sebagai contoh, kita boleh mentakrifkan kelas bernama "blur-effect":

.blur-effect {
filter: blur(5px);
}

Dalam kod di atas, atribut penapis ditetapkan kepada blur(5px), iaitu, Imej dikaburkan sebanyak 5 piksel. Anda boleh melaraskan tahap kabur mengikut keperluan, seperti meningkatkan jejari kabur.

2. Tentukan animasi kesan lekukan

Dalam CSS, kita boleh menggunakan perpustakaan animasi CSS untuk mentakrifkan kesan animasi tertentu. Untuk kesan hover tetikus, kita boleh menggunakan CSS: hover pseudo-classes dan atribut peralihan untuk mencapai kesan animasi.

Pertama, kita perlu menggunakan kesan kabur pada elemen atas tetikus. Mengambil gambar sebagai contoh, kita boleh menggunakan kelas .blur-effect di atas pada kelas CSS gambar:

.img-container {
transition: filter 0.5s ease;
}

.img-container:hover {
penapis: blur(5px);
}

Dalam kod di atas, kami menetapkan atribut peralihan untuk menapis mudah 0.5s, yang bermaksud bahawa tempoh kesan peralihan ialah 0.5 saat dan kesan peralihan adalah lancar. Apabila tetikus melayang, atribut penapis ditetapkan kepada kabur(5px) melalui kelas pseudo :hover, iaitu imej dikaburkan sebanyak 5 piksel. .

Kita boleh menggunakan sifat terbalik kesan peralihan untuk mencapai kesan ini. Tambahkan kod berikut pada kelas .img-container di atas:
3. .img-container {

transition: filter 0.5s ease;

}

.img-container:hover {

filter: blur(5px);

}

.img-container:hover:not(:hover) {

peralihan: penapis 0.5s mudah;

penapis: blur(0px);
}

Dalam kod di atas, kami mentakrifkan hover tetikus melalui pseudo- :hover kelas Kesan khas masa henti. Kemudian gunakan pemilih :not(:hover) untuk menentukan kesan khas apabila tetikus pergi dan tetapkan atribut penapis kepada blur(0px), yang membatalkan kesan kabur.

Ringkasnya, kita boleh menggunakan sifat penapis dan kesan animasi CSS untuk mencapai kesan kabur apabila tetikus melayang. Dengan mentakrifkan kelas CSS tertentu dan melaksanakan kesan peralihan melalui :hover pseudo-classes dan atribut peralihan, kesan khas boleh dibuat lebih lancar dan lebih semula jadi. Berikut ialah contoh kod lengkap:

Kod HTML:

<div class="img-container">
  <img src="example.jpg" alt="example image">
</div>

Kod CSS:

.blur-effect {
  filter: blur(5px);
}

.img-container {
  transition: filter 0.5s ease;
}

.img-container:hover {
  filter: blur(5px);
}

.img-container:hover:not(:hover) {
  transition: filter 0.5s ease;
  filter: blur(0px);
}

Dengan contoh kod di atas, kami boleh melaksanakan kesan kabur apabila tetikus berlegar pada halaman web. Apabila pengguna melayang di atas imej, imej akan beransur-ansur kabur apabila tetikus pergi, imej akan beransur-ansur kembali ke keadaan asalnya, membawa pengalaman yang lancar dan semula jadi.

Ringkasan:

Menggunakan sifat penapis CSS dan kesan animasi, kita boleh mencapai kesan kabur dengan mudah apabila tetikus melayang. Dengan mentakrifkan kelas CSS tertentu dan menggabungkan :hover pseudo-class dan atribut peralihan, kami boleh mengawal paparan dan kehilangan kesan khas untuk meningkatkan pengalaman pengguna. Dalam aplikasi praktikal, tahap kesan kabur dan tempoh kesan peralihan boleh dilaraskan secara fleksibel mengikut keperluan, menjadikan kesan khas lebih cemerlang dan menarik.

Atas ialah kandungan terperinci Petua dan kaedah menggunakan CSS untuk mencapai kesan kabur apabila tetikus melayang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!