Cipta Kesan Bend & Dedahkan Hover yang Menakjubkan dengan Latar Belakang Ilusi Menggunakan HTML & CSS-tutorial js-php.cn

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

DDD

Lepaskan： 2024-12-03 22:36:11

asal

676 orang telah melayarinya

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>

Salin selepas log masuk

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!