Bagaimana untuk Memusing Imej pada Hover dengan CSS?

Putaran Imej Dicetuskan Tuding

Untuk kebanyakan aplikasi web, adalah wajar untuk menambah kesan animasi interaktif untuk meningkatkan penglibatan pengguna. Satu kesan sedemikian ialah memutar atau memutar imej apabila pengguna menuding di atasnya. Artikel ini menunjukkan cara untuk mencapai fungsi ini menggunakan CSS pada imej bulat.

Pelaksanaan CSS untuk Putaran Imej

Untuk mencipta imej berputar pada tuding, anda boleh menggunakan peralihan CSS3 dengan 'rotate( )' harta. Coretan kod CSS berikut menyediakan gaya yang diperlukan:

<code class="css">img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}</code>

Penjelasan:

• Sifat 'peralihan' menetapkan tempoh dan kesan peralihan untuk ' mengubah' perubahan harta. Dalam kes ini, peralihan akan mengambil masa 0.7 saat dengan kesan 'kemudahan-masuk-keluar'.
• Apabila pengguna menuding pada imej, gaya 'legar' digunakan.
• sifat 'transform' dengan 'rotate(360deg)' memutarkan imej 360 darjah, mewujudkan kesan berputar.

Menggunakan Gaya pada HTML

Dalam coretan kod HTML di bawah, satu imej dibenamkan menggunakan teg 'img':

<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100" /></code>

Dengan memautkan kod CSS ke halaman HTML ini, imej akan berputar apabila pengguna menuding ke atasnya. Ini menunjukkan teknik yang mudah dan berkesan untuk menambahkan elemen interaktif pada aplikasi web.

Atas ialah kandungan terperinci Bagaimana untuk Memusing Imej pada Hover dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!