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

Petua dan kaedah menggunakan CSS untuk melaksanakan kesan bayang-bayang apabila tetikus melayang-layang Contoh kod khusus diperlukan

Dalam reka bentuk web, kesan alih tetikus ialah salah satu kaedah interaksi biasa. Dengan mempunyai elemen memaparkan kesan khusus pada tetikus, anda boleh meningkatkan pengalaman pengguna dan daya tarikan tapak web anda. Antaranya, menggunakan CSS untuk melaksanakan kesan bayangan apabila tetikus melayang adalah kaedah biasa dan mudah. Artikel ini akan memperkenalkan cara melaksanakan teknik ini dan memberikan contoh kod khusus.

1. Kesan bayang yang ringkas
Mula-mula, kita perlu menggunakan CSS untuk menentukan gaya asas, dan kemudian menambah kesan bayang-bayang tambahan apabila tetikus melayang. Berikut ialah kod sampel untuk melaksanakan kesan bayang-bayang mudah:

HTML:

Bayang-bayang pada tetikus

CSS:
.kotak {
lebar: 200px;
200px;
warna latar belakang: #f1f1f1;
peralihan: bayang-kotak 0.3s;
}

.kotak:tuding {
bayang-kotak: 0 0 10px rgba(0, 0, 0, 0.5);
}

Perihalan kod:

• Bahagian HTML, kami menggunakan elemen div dengan kelas "kotak" sebagai contoh.
• Dalam bahagian CSS, kami menetapkan lebar, ketinggian dan warna latar belakang elemen div dan menggunakan atribut peralihan untuk menentukan kesan peralihan.
• Apabila elemen div berada dalam keadaan tetikus, kami menggunakan pemilih :hover untuk menambah atribut box-shadow untuk mencapai kesan bayang.

2. Kesan bayang berbilang lapisan
Jika kita perlu mencapai kesan bayang berbilang lapisan, kita boleh menggunakan berbilang atribut bayang kotak untuk menindih. Berikut ialah kod sampel untuk mencapai kesan bayang-bayang berbilang lapisan:

HTML:

Bayang-bayang berbilang lapisan

CSS:
.kotak {
lebar: 200px;
tinggi : 200px;
warna latar belakang: #f1f1f1;
peralihan: bayang-kotak 0.3s;
}

.kotak:tuding {
bayang-kotak: 0 0 10px rgba(0, 0, 0, 0.2),

          0 5px 15px rgba(0, 0, 0, 0.4),
          0 10px 20px rgba(0, 0, 0, 0.6);

}

Penerangan kod:

• Bahagian HTML adalah sama seperti contoh sebelumnya.

• Bahagian CSS, dalam kelas pseudo :hover, kami menggunakan tiga atribut bayang kotak untuk masing-masing mentakrifkan tiga lapisan bayang

  • Jejari kabur lapisan pertama bayang ialah 10px dan ketelusan ialah 0.2;
  Lapisan kedua Jejari kabur bayang-bayang ialah 15px dan ketelusan ialah 0.4;
  3. Kesan bayang tidak teratur
Jika kita ingin mencapai kesan bayang berbentuk tidak sekata, kita boleh menggunakan kelas pseudo dan mengubah atribut secara gabungan. Berikut ialah kod sampel untuk mencapai kesan bayang tidak sekata:

HTML:

bayang tidak sekata

CSS:
.kotak {

lebar: 200px;

200px;
warna latar belakang: #f1f1f1;
peralihan: bayang-kotak 0.3s;
kedudukan: relatif;
limpahan: tersembunyi;
}

.kotak::sebelum {
kandungan: "";

kedudukan: mutlak ;

lebar: 100%;
tinggi: 100%;
warna latar belakang: rgba(0, 0, 0, 0.4);
transform: putar(-45deg);
atas: 50%;
kiri: -100% ;
z-index: -1;
peralihan: transform 0.3s;
}

.box:hover::sebelum {
transform: rotate(45deg);

kiri: 100%;

}

Kod penerangan:

Bahagian HTML adalah sama seperti contoh sebelumnya.

Dalam bahagian CSS, kami menggunakan pseudo class::before untuk mencipta lapisan latar belakang yang diputar Transform: rotate(-45deg) boleh mencapai kesan berputar 45 darjah.

• Apabila tetikus melayang, gunakan kelas pseudo :hover dan atribut transformasi untuk menukar sudut putaran dan kedudukan lapisan latar belakang untuk mencapai kesan bayang-bayang yang tidak sekata.
• Ringkasan:
• Artikel ini memperkenalkan teknik dan kaedah menggunakan CSS untuk mencapai kesan bayangan apabila tetikus melayang, dan memberikan contoh kod khusus. Dengan menguasai sifat CSS asas dan pemilih kelas pseudo ini, kami boleh melaksanakan pelbagai kesan bayang-bayang tetikus dengan mudah, meningkatkan daya tarikan visual dan pengalaman pengguna halaman web.

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