cari

Rumah >hujung hadapan web >tutorial js >Ilusi Kad Glassmorphism menggunakan html css dan kod javascript

Ilusi Kad Glassmorphism menggunakan html css dan kod javascript

DDD
DDDasal
2024-12-09 14:27:17912semak imbas

Glassmorphism Cards illusion using html css and javascript code

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kad Kaca Interaktif</title>
  <gaya>
    * {
      margin: 0;
      padding: 0;
      saiz kotak: kotak sempadan;
    }
    badan {
      latar belakang: kecerunan linear(135deg, #101010, #1f1f1f);
      ketinggian: 100vh;
      paparan: flex;
      align-item: tengah;
      justify-content: pusat;
      limpahan: tersembunyi;
      font-family: Arial, sans-serif;
    }
    .neon-shapes {
      jawatan: mutlak;
      atas: 0;
      kiri: 0;
      lebar: 100%;
      ketinggian: 100%;
      pointer-events: tiada;
    }
    .circle, .triangle, .rectangle {
      jawatan: mutlak;
      kelegapan: 0.8;
      penapis: blur(2px);
    }
    .bulatan {
      lebar: 200px;
      ketinggian: 200px;
      latar belakang: rgba(0, 255, 255, 0.8);
      jejari sempadan: 50%;
      atas: 20%;
      kiri: 15%;
    }
    .segitiga {
      lebar: 0;
      ketinggian: 0;
      sempadan-kiri: 100px padu lutsinar;
      sempadan-kanan: 100px pepejal lutsinar;
      bahagian bawah sempadan: 200px rgba pepejal(255, 0, 255, 0.8);
      atas: 50%;
      kiri: 70%;
    }
    .segiempat {
      lebar: 220px;
      ketinggian: 180px;
      latar belakang: rgba(255, 255, 0, 0.8);
      atas: 70%;
      kiri: 30%;
    }
    .kad-bekas {
      paparan: flex;
      jurang: 20px;
      kedudukan: relatif;
      indeks-z: 1;
    }
    .card {
      latar belakang: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      lebar: 230px;
      ketinggian: 320px;
      jejari sempadan: 15px;
      paparan: flex;
      flex-direction: lajur;
      align-item: tengah;
      justify-content: ruang-antara;
      padding: 20px;
      bayang-kotak: 0 4px 30px rgba(0, 0, 0, 0.5);
      peralihan: mengubah 0.3s mudah, kotak-bayangan mudah 0.3s;
    }
    .card img {
      lebar: 100px;
      ketinggian: 100px;
      jejari sempadan: 50%;
      peralihan: mengubah 0.3s, kotak-bayang 0.3s;
    }
    .kad h3 {
      warna: putih;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', Geneva, Verdana, sans-serif;
    }
    .pengarang {
      warna: putih;
      saiz fon: 14px;
      jidar atas: -10px;
    }
    .follow-btn {
      latar belakang: rgba(0, 255, 127, 0.7);
      sempadan: tiada;
      padding: 15px 25px;
      jejari sempadan: 20px;
      warna: putih;
      saiz fon: 18px;
      kursor: penunjuk;
      text-transform: huruf besar;
      animasi: neon-kerlipan 2s tak terhingga;
      peralihan: latar belakang 0.3s;
    }
    .follow-btn:hover {
      latar belakang: rgba(0, 255, 127, 1);
    }
    @keyframes neon-flicker {
      0%, 100% {
        bayang kotak: 0 0 10px rgba(0, 255, 127, 0.8), 0 0 30px rgba(0, 255, 127, 0.8), 0 0 50px rgba(0, 255, 127, 0.8);
      }
      50% {
        bayang-kotak: 0 0 20px rgba(0, 255, 127, 1), 0 0 40px rgba(0, 255, 127, 1), 0 0 60px rgba(0, 255, 127, 1);
      }
    }.card:hover {
      transform: skala(1.1);
      bayang-kotak: 0 8px 50px rgba(0, 255, 127, 0.8);
    }
    .card img {
  lebar: 100px;
  ketinggian: 100px;
  jejari sempadan: 50%;
  peralihan: mengubah 0.3s mudah, penapis 0.3s mudah;
}

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

.card img.active {
  transform: translateY(-30px) skala(1.2);
  penapis: drop-shadow(0 0 20px rgba(255, 255, 0, 1));
}

  </style>
</head>
<badan>
  <div>

Atas ialah kandungan terperinci Ilusi Kad Glassmorphism menggunakan html css dan kod javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Filter using pointer display position overflow margin padding border viewport background transform transition animation 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：Adakah Pernyataan `let` Mencipta Sifat Global dalam JavaScript?Artikel seterusnya：Adakah Pernyataan `let` Mencipta Sifat Global dalam JavaScript?

Artikel berkaitan

Lihat lagi