cari

Rumah >hujung hadapan web >tutorial js >Cipta Kesan Bend & Dedahkan Hover yang Menakjubkan dengan Latar Belakang Ilusi Menggunakan HTML & CSS

Cipta Kesan Bend & Dedahkan Hover yang Menakjubkan dengan Latar Belakang Ilusi Menggunakan HTML & CSS

DDD
DDDasal
2024-12-03 22:36:11671semak imbas

Create a Stunning Bend & Reveal Hover Effect with Illusionistic Background Using HTML & CSS

Ikuti kami di instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bengkok & Dedahkan Kesan</title>
  <gaya>
    * {
      margin: 0;
      padding: 0;
      saiz kotak: kotak sempadan;
    }
    badan {
      paparan: flex;
      justify-content: pusat;
      align-item: tengah;
      ketinggian: 100vh;
      latar belakang: kecerunan linear(135deg, #1e1e1e, #3c3c3c);
      limpahan: tersembunyi;
      font-family: Arial, sans-serif;
    }
    .bekas {
      kedudukan: relatif;
      lebar: 300px;
      ketinggian: 400px;
      perspektif: 1200px;
      limpahan: nampak;
    }

    /* Latar belakang grid bercahaya ilusi */
    .ilusi-bg {
      jawatan: mutlak;
      atas: -20px;
      kiri: -20px;
      lebar: calc(100% 40px);
      ketinggian: calc(100% 40px);
      latar belakang: berulang-linear-gradient (45deg,
       rgba(255, 255, 255, 0.1) 0 5px, telus 5px 10px);
      jejari sempadan: 15px;
      bayang-kotak: inset 0 0 50px rgba(255, 255, 255, 0.05),
       0 0 30px rgba(0, 255, 255, 0.5);
      indeks-z: -1;
      penapis: blur(5px);
    }

    .pembungkus imej {
      kedudukan: relatif;
      lebar: 100%;
      ketinggian: 100%;
      transform-asal: tengah bawah;
      peralihan: mengubah 0.8s mudah, kotak-bayangan mudah 0.8s, penapis 0.6s mudah;
      jejari sempadan: 15px;
      limpahan: tersembunyi;
      indeks-z: 1;
    }
    .image-wrapper img {
      lebar: 100%;
      ketinggian: 100%;
      sesuai objek: penutup;
      jejari sempadan: 15px;
      penapis: kecerahan (80%);
      peralihan: penapis 0.8s mudah;
    }

    .reveal-png {
      jawatan: mutlak;
      atas: 0;
      kiri: 0;
      lebar: 100%;
      ketinggian: 100%;
      latar belakang: url('./removebg.png') pusat tiada ulangan;
      saiz latar belakang: penutup;
      kelegapan: 0;
      transform: translateY(50px) skala(0.9);
      peralihan: kelegapan 0.8s memudahkan, mengubah 0.8s memudahkan, menapis 0.6s memudahkan;
      penapis: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9));
    }

    /* Kesan Tuding */
    .container:hover .image-wrapper {
      transform: skala rotateX(-70deg)(1.05);
      bayang-kotak: 0 30px 60px rgba(0, 0, 0, 0.8);
      penapis: warna-putar (30deg);
    }

    .container:hover .image-wrapper img {
      penapis: kecerahan(100%) tepu(1.2);
    }

    .container:hover .reveal-png {
      indeks-z: 1;
      kelegapan: 1;
      transform: terjemahY(0) skala(1.06);
      penapis: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
    }

    .container:hover .illusion-bg {
      animasi: nadi 2s mudah masuk bergantian tak terhingga;
    }

    @keyframes nadi {
      0% {
        transform: skala (1);
        kelegapan: 0.8;
      }
      100% {
        transform: skala (1.05);
        kelegapan: 1;
      }
    }
  </style>
</head>
<badan>

<div>

Atas ialah kandungan terperinci Cipta Kesan Bend & Dedahkan Hover yang Menakjubkan dengan Latar Belakang Ilusi Menggunakan HTML & CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html Object Filter using display position overflow margin padding border viewport background transform transition animation flex https
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：Bagaimana untuk Mencipta Pemasa Undur Sederhana Hanya Menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk Mencipta Pemasa Undur Sederhana Hanya Menggunakan JavaScript?

Artikel berkaitan

Lihat lagi