✨ Verwandeln Sie Ihr Dropdown-Menü mit Glasmorphismus und Neoneffekten! ✨-js-Tutorial-php.cn

✨ Verwandeln Sie Ihr Dropdown-Menü mit Glasmorphismus und Neoneffekten! ✨

Linda Hamilton

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

Original

1037 Leute haben es durchsucht

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

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Glassmorphism Dropdown</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <Stil>
    /* Globales Styling */
    Körper {
      Rand: 0;
      Höhe: 100 Vh;
      Anzeige: Flex;
      align-items: center;
      rechtfertigen-Inhalt: Mitte;
      Hintergrund: linear-gradient(135deg, #0f0f0f, #1a1a1a);
      Schriftfamilie: „Arial“, serifenlos;
      Farbe: #fff;
    }

    /* Dropdown-Container */
    .runterfallen {
      Position: relativ;
      Anzeige: Inline-Block;
      Hintergrund: rgba(255, 255, 255, 0,1);
      Randradius: 12px;
      Hintergrundfilter: Unschärfe (15 Pixel);
      Polsterung: 20px;
      Box-Shadow: 0 8px 20px rgba(255, 255, 255, 0,1);
      Übergang: Box-Shadow 0,3 s Leichtigkeit, Hintergrund 0,3 s Leichtigkeit;
    }

    .dropdown:hover {
      Hintergrund: rgba(255, 255, 255, 0,2);
      Box-Shadow: 0 8px 30px rgba(255, 255, 255, 0,2);
    }

    .dropdown-btn {
      Polsterung: 15px 20px;
      Schriftgröße: 16px;
      Grenze: keine;
      Randradius: 8px;
      Farbe: weiß;
      Cursor: Zeiger;
      Gliederung: keine;
      Anzeige: Flex;
      align-items: center;
      justify-content: Leerzeichen dazwischen;
      Hintergrund: rgba(255, 255, 255, 0,1);
      Hintergrundfilter: Unschärfe (10 Pixel);
      Box-Shadow: 0 5px 15px rgba(0, 0, 0, 0,3);
      Übergang: Hintergrund 0,3 s Verzögerung, Box-Schatten 0,3 s Verzögerung;
    }

    .dropdown-btn:hover {
      Hintergrund: rgba(255, 255, 255, 0,2);
      Box-Shadow: 0 5px 20px rgba(255, 255, 255, 0,5);
    }

    /* Dropdown-Menü */
    .dropdown-menu {
      Position: absolut;
      oben: 70px;
      links: 0;
      Breite: 260px;
      Hintergrund: rgba(255, 255, 255, 0,1);
      Randradius: 12px;
      Box-Shadow: 0 10px 30px rgba(0, 0, 0, 0,5);
      Hintergrundfilter: Unschärfe (15 Pixel);
      Polsterung: 10px;
      Anzeige: keine;
      Flexrichtung: Spalte;
    }

    .dropdown:hover .dropdown-menu {
      Anzeige: Flex;
    }

    .dropdown-menu li {
      Listenstil: keiner;
      Polsterung: 12px 15px;
      Anzeige: Flex;
      align-items: center;
      Lücke: 10px;
      Cursor: Zeiger;
      Farbe: #fff;
      Randradius: 8px;
      Überlauf: versteckt;
      Übergang: Hintergrund 0,3 s Leichtigkeit, Box-Schatten 0,3 s Leichtigkeit, Farbe 0,3 s Leichtigkeit;
    }

    /* Symbol und Text */
    .dropdown-menu li i {
      Schriftgröße: 24px;
      Übergang: Farbe 0,3 s Leichtigkeit;
    }

    .dropdown-menu li span {
      Schriftgröße: 16px;
      Übergang: Farbe 0,3 s Leichtigkeit;
    }

    /* Hover-Effekte */
    .dropdown-menu li:hover {
      Hintergrund: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
      box-shadow: 0 0 15px rgba(0, 255, 255, 0,5), 0 0 25px rgba(255, 0, 255, 0,4);
      Farbe: #fff;
    }.dropdown-menu li:hover i {
      Farbe: #0ff; /* Neoncyan */
    }

    .dropdown-menu li:hover span {
      Farbe: #f0f; /* Neon-Magenta */
    }
  </style>
</head>
<Körper>
  <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt von✨ Verwandeln Sie Ihr Dropdown-Menü mit Glasmorphismus und Neoneffekten! ✨. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!