Rumah > Artikel > hujung hadapan web > Mencipta Kesan Hover Terjemah dengan HTML dan CSS

Mencipta Kesan Hover Terjemah dengan HTML dan CSS

PHPzasal: 2024-08-09 17:00:32707semak imbas

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>

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);
}

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!

css html for Attribute Property this display overflow column flex

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：sebab Mengapa TailwindCSS Mengungguli CSS TradisionalArtikel seterusnya：sebab Mengapa TailwindCSS Mengungguli CSS Tradisional

Artikel berkaitan

Lihat lagi