✨ Ubah Menu Turun Anda dengan Glassmorphism & Kesan Neon! ✨-tutorial js-php.cn

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

Linda Hamilton

Lepaskan： 2024-12-10 08:42:15

asal

1112 orang telah melayarinya

✨ 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>

Salin selepas log masuk

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!