✨ Transformez votre menu déroulant avec le Glassmorphisme et les effets néon ! ✨-js tutoriel-php.cn

✨ Transformez votre menu déroulant avec le Glassmorphisme et les effets néon ! ✨

Linda Hamilton

Libérer： 2024-12-10 08:42:15

original

1013 Les gens l'ont consulté

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

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Liste déroulante Neon Glassmorphism</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    /* Style global */
    corps {
      marge : 0 ;
      hauteur : 100vh ;
      affichage : flexible ;
      aligner les éléments : centre ;
      justifier-contenu : centre ;
      arrière-plan : dégradé linéaire (135 deg, #0f0f0f, #1a1a1a) ;
      famille de polices : « Arial », sans empattement ;
      couleur : #fff ;
    }

    /* Conteneur déroulant */
    .dérouler {
      position : relative ;
      affichage : bloc en ligne ;
      arrière-plan : rgba(255, 255, 255, 0,1) ;
      rayon de bordure : 12 px ;
      filtre de toile de fond : flou (15 px );
      remplissage : 20 px ;
      box-shadow : 0 8px 20px rgba(255, 255, 255, 0.1);
      transition : facilité de l'ombre de la boîte 0,3 s, facilité de l'arrière-plan 0,3 s ;
    }

    .dropdown : survoler {
      arrière-plan : rgba(255, 255, 255, 0,2) ;
      ombre de la boîte : 0 8px 30px rgba(255, 255, 255, 0,2) ;
    }

    .dropdown-btn {
      remplissage : 15px 20px ;
      taille de police : 16 px ;
      bordure : aucune ;
      rayon de bordure : 8 px ;
      couleur : blanc ;
      curseur : pointeur ;
      contour : aucun ;
      affichage : flexible ;
      aligner les éléments : centre ;
      justifier-contenu : espace entre les deux ;
      arrière-plan : rgba(255, 255, 255, 0,1) ;
      filtre de toile de fond : flou (10 px );
      box-shadow : 0 5px 15px rgba(0, 0, 0, 0.3);
      transition : facilité d'arrière-plan 0,3 s, facilité d'ombre de boîte 0,3 s ;
    }

    .dropdown-btn: survol {
      arrière-plan : rgba(255, 255, 255, 0,2) ;
      box-shadow : 0 5px 20px rgba(255, 255, 255, 0,5);
    }

    /* Menu déroulant */
    .menu déroulant {
      position : absolue ;
      haut : 70 px ;
      gauche : 0 ;
      largeur : 260 px ;
      arrière-plan : rgba(255, 255, 255, 0,1) ;
      rayon de bordure : 12 px ;
      box-shadow : 0 10px 30px rgba(0, 0, 0, 0.5);
      filtre de toile de fond : flou (15 px );
      remplissage : 10 px ;
      affichage : aucun ;
      direction flexible : colonne ;
    }

    .dropdown : survolez .dropdown-menu {
      affichage : flexible ;
    }

    .menu déroulant li {
      style de liste : aucun ;
      remplissage : 12px 15px ;
      affichage : flexible ;
      aligner les éléments : centre ;
      écart : 10 px ;
      curseur : pointeur ;
      couleur : #fff ;
      rayon de bordure : 8 px ;
      débordement : caché ;
      transition : facilité d'arrière-plan 0,3 s, facilité d'ombre de boîte 0,3 s, facilité de couleur 0,3 s ;
    }

    /* Icône et texte */
    .menu déroulant li i {
      taille de police : 24 px ;
      transition : couleur facilité 0,3 s ;
    }

    .menu déroulant li span {
      taille de police : 16 px ;
      transition : couleur facilité 0,3 s ;
    }

    /* Effets de survol */
    .menu déroulant li:hover {
      arrière-plan : dégradé linéaire (135 degrés, 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);
      couleur : #fff ;
    }.dropdown-menu li: survoler i {
      couleur : #0ff ; /* Néon Cyan */
    }

    .dropdown-menu li:hover span {
      couleur : #f0f ; /* Néon Magenta */
    }
  </style>
&Lt;/tête>
<corps>
  <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!