Kesan Zum Imej CSS pada Tuding dengan Transformasi CSS3
Mencipta kesan tuding yang mengezum ke dalam imej boleh dicapai dengan mudah menggunakan sifat transformasi CSS3 . Pendekatan ini memerlukan kod minimum dan menyediakan peningkatan visual yang anggun tanpa memerlukan jadual kompleks atau div topeng.
Pelaksanaan
Untuk mencipta kesan zum, ikut langkah berikut:
<div class="thumbnail"> <div class="image"> <img src="image.jpg" alt="Your image"> </div> </div>
.thumbnail { width: 320px; height: 240px; } .image { width: 100%; height: 100%; } .image img { transition: all 1s ease; } .image:hover img { transform: scale(1.25); }
Contoh
Lihat contoh biola berikut: https://jsfiddle.net/rkd3x4uc/
Nota:
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Zum Imej pada Tuding Hanya Menggunakan Transformasi CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!