Ilusi Kad Glassmorphism menggunakan html css dan kod javascript-tutorial js-php.cn

Ilusi Kad Glassmorphism menggunakan html css dan kod javascript

DDD

Lepaskan： 2024-12-09 14:27:17

asal

913 orang telah melayarinya

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>

Salin selepas log masuk

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!