suchen

Heim >Web-Frontend >js-Tutorial >✨ Verwandeln Sie Ihr Dropdown-Menü mit Glasmorphismus und Neoneffekten! ✨

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

Linda Hamilton
Linda HamiltonOriginal
2024-12-10 08:42:151020Durchsuche

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

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!

css ajax html Filter pointer href display position overflow margin padding border viewport background transform transition column flex li https
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die progressive Einführungsstrategie von TypeScript für Front-End-ProjekteNächster Artikel：Die progressive Einführungsstrategie von TypeScript für Front-End-Projekte

In Verbindung stehende Artikel

Mehr sehen