Mencipta Kesan Hover Terjemah dengan HTML dan CSS-tutorial css-php.cn

Mencipta Kesan Hover Terjemah dengan HTML dan CSS

PHPz

Lepaskan： 2024-08-09 17:00:32

asal

701 orang telah melayarinya

Dalam reka bentuk web moden, mencipta pengalaman visual yang menarik dan interaktif adalah kunci untuk menarik minat pengguna. Salah satu cara paling berkesan untuk mencapai matlamat ini ialah melalui kesan tuding, yang memberikan maklum balas segera apabila pengguna berinteraksi dengan elemen pada halaman.

Apakah itu Kesan Tuding Terjemah?
Kesan lereng terjemah melibatkan peralihan elemen di sepanjang paksi X atau Y apabila pengguna melayang di atasnya dengan tetikus mereka. Kesan ini memberikan ilusi bahawa elemen itu bergerak atau terapung, memberikan pengalaman pengguna yang lebih interaktif dan responsif.

Output-

Creating a Translate Hover Effect with HTML and CSS

HTML-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Translate Hover Effect</title>
</head>
<body>
  <div class="image-container">
    <img src="image1.jpg" alt="Image 1" class="hover-image">
    <img src="image2.jpg" alt="Image 2" class="hover-image">
    <img src="image3.jpg" alt="Image 3" class="hover-image">
  </div>
</body>
</html>

Salin selepas log masuk

CSS-

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.image-container {
  display: flex;
  gap: 20px;
  max-width: 1000px;
    flex-wrap:wrap;
}

.hover-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.hover-image:hover {
  transform: translateY(-10px);
}

Salin selepas log masuk

paparan: flex;: Paparan: flex; harta digunakan untuk mencipta bekas yang fleksibel. Atribut ini memudahkan untuk mencipta struktur susun atur yang fleksibel dan responsif tanpa memerlukan apungan atau kedudukan.

Faedah paparan: flex; :

Pilihan penjajaran mudah untuk item mendatar dan menegak.
Sesuaikan susunan visual sesuatu tanpa menjejaskan struktur HTML.
Fleksibiliti: Item boleh melaraskan agar sesuai dengan kawasan yang tersedia, menghasilkan reka bentuk yang responsif.
Susun ruang dalam item dengan cekap di sepanjang paksi utama (baris atau lajur).

flex-wrap: wrap;:

Balut lentur: balut; harta, digunakan bersama dengan paparan: flex;, mengawal cara objek flex membalut beberapa baris. (Baca Lagi)

Manfaat flex-wrap: wrap;

Reka Bentuk Responsif: Membenarkan objek berhijrah ke baris seterusnya apabila ruang tidak mencukupi pada satu baris, penting untuk reka letak responsif.
Penggunaan Ruang yang Lebih Baik: Membenarkan sesuatu untuk dibungkus meningkatkan penggunaan ruang dan mengelakkan masalah limpahan.
Ketekalan: Ia menyumbang kepada reka letak yang seragam dan teratur tanpa mengira saiz skrin.

Baca Artikel Penuh - Klik di sini

Kesimpulan
Kesan hover terjemah ialah alat yang hebat untuk ada dalam kit alat reka bentuk web anda. Ia mudah untuk dilaksanakan, ringan dan boleh menambahkan sentuhan profesional pada tapak web anda. Sama ada anda mempamerkan imej, butang atau elemen interaktif lain, kesan ini membantu menarik pengguna dan meningkatkan pengalaman pengguna secara keseluruhan.

Atas ialah kandungan terperinci Mencipta Kesan Hover Terjemah dengan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!