cari

Rumah >hujung hadapan web >tutorial js >✨ Ubah Menu Turun Anda dengan Glassmorphism & Kesan Neon! ✨

✨ Ubah Menu Turun Anda dengan Glassmorphism & Kesan Neon! ✨

Linda Hamilton
Linda Hamiltonasal
2024-12-10 08:42:151014semak imbas

✨ Transform Your Dropdown Menu with Glassmorphism & Neon Effects! ✨

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Glassmorphism Dropdown</title>
  <pautan href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <gaya>
    /* Penggayaan Global */
    badan {
      margin: 0;
      ketinggian: 100vh;
      paparan: flex;
      align-item: tengah;
      justify-content: pusat;
      latar belakang: kecerunan linear(135deg, #0f0f0f, #1a1a1a);
      font-family: 'Arial', sans-serif;
      warna: #fff;
    }

    /* Bekas Jatuh Turun */
    .dropdown {
      kedudukan: relatif;
      paparan: inline-block;
      latar belakang: rgba(255, 255, 255, 0.1);
      jejari sempadan: 12px;
      backdrop-filter: blur(15px);
      padding: 20px;
      bayang-kotak: 0 8px 20px rgba(255, 255, 255, 0.1);
      peralihan: kotak-bayangan mudah 0.3s, latar belakang 0.3s mudah;
    }

    .dropdown:hover {
      latar belakang: rgba(255, 255, 255, 0.2);
      bayang kotak: 0 8px 30px rgba(255, 255, 255, 0.2);
    }

    .dropdown-btn {
      padding: 15px 20px;
      saiz fon: 16px;
      sempadan: tiada;
      jejari sempadan: 8px;
      warna: putih;
      kursor: penunjuk;
      garis besar: tiada;
      paparan: flex;
      align-item: tengah;
      justify-content: ruang-antara;
      latar belakang: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      bayang-kotak: 0 5px 15px rgba(0, 0, 0, 0.3);
      peralihan: kemudahan 0.3s latar belakang, kemudahan 0.3s bayang-kotak;
    }

    .dropdown-btn:hover {
      latar belakang: rgba(255, 255, 255, 0.2);
      bayang-kotak: 0 5px 20px rgba(255, 255, 255, 0.5);
    }

    /* Menu lungsur */
    .dropdown-menu {
      jawatan: mutlak;
      atas: 70px;
      kiri: 0;
      lebar: 260px;
      latar belakang: rgba(255, 255, 255, 0.1);
      jejari sempadan: 12px;
      bayang-kotak: 0 10px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(15px);
      padding: 10px;
      paparan: tiada;
      flex-direction: lajur;
    }

    .dropdown:hover .dropdown-menu {
      paparan: flex;
    }

    .dropdown-menu li {
      gaya senarai: tiada;
      padding: 12px 15px;
      paparan: flex;
      align-item: tengah;
      jurang: 10px;
      kursor: penunjuk;
      warna: #fff;
      jejari sempadan: 8px;
      limpahan: tersembunyi;
      peralihan: kelonggaran 0.3s latar belakang, kelonggaran 0.3s bayang-kotak, kelonggaran 0.3s warna;
    }

    /* Ikon dan Teks */
    .dropdown-menu li i {
      saiz fon: 24px;
      peralihan: warna 0.3s mudah;
    }

    .dropdown-menu li span {
      saiz fon: 16px;
      peralihan: warna 0.3s mudah;
    }

    /* Kesan Tuding */
    .dropdown-menu li:hover {
      latar belakang: kecerunan linear(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
      bayang-kotak: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(255, 0, 255, 0.4);
      warna: #fff;
    }.dropdown-menu li:hover i {
      warna: #0ff; /* Neon Cyan */
    }

    .dropdown-menu li:hover span {
      warna: #f0f; /* Neon Magenta */
    }
  </style>
</head>
<badan>
  <div>

Atas ialah kandungan terperinci ✨ Ubah Menu Turun Anda dengan Glassmorphism & Kesan Neon! ✨. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css ajax html Filter pointer href display position overflow margin padding border viewport background transform transition column flex li 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：Strategi penggunaan progresif TypeScript untuk projek hadapanArtikel seterusnya：Strategi penggunaan progresif TypeScript untuk projek hadapan

Artikel berkaitan

Lihat lagi