首頁 > web前端 > js教程 > ✨ 用玻璃造型和霓虹燈效果改變您的下拉式選單! ✨

✨ 用玻璃造型和霓虹燈效果改變您的下拉式選單! ✨

Linda Hamilton
發布: 2024-12-10 08:42:15
原創
1037 人瀏覽過

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



  
  
  <title>霓虹燈玻璃型態下拉清單</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">;
  
    /* 全域樣式 */
    身體 {
      保證金:0;
      高度:100vh;
      顯示:柔性;
      對齊項目:居中;
      調整內容:居中;
      背景:線性漸變(135deg,#0f0f0f,#1a1a1a);
      字體系列:'Arial',無襯線字體;
      顏色:#fff;
    }

    /* 下拉容器 */
    .dropdown {
      位置:相對;
      顯示:內聯塊;
      背景:rgba(255, 255, 255, 0.1);
      邊框半徑:12px;
      背景過濾器:模糊(15px);
      內邊距:20px;
      盒子陰影: 0 8px 20px rgba(255, 255, 255, 0.1);
      過渡:box-shadow 0.3s 緩動,背景 0.3s 緩動;
    }

    .dropdown:懸停{
      背景:rgba(255, 255, 255, 0.2);
      盒子陰影: 0 8px 30px rgba(255, 255, 255, 0.2);
    }

    .dropdown-btn {
      內邊距:15 像素 20 像素;
      字體大小:16px;
      邊框:無;
      邊框半徑:8px;
      顏色: 白色;
      遊標:指針;
      概要:無;
      顯示:柔性;
      對齊項目:居中;
      對齊內容:空間之間;
      背景:rgba(255, 255, 255, 0.1);
      背景過濾器:模糊(10px);
      盒子陰影:0 5px 15px rgba(0, 0, 0, 0.3);
      過渡:背景 0.3 秒緩動,框陰影 0.3 秒緩動;
    }

    .dropdown-btn:懸停{
      背景:rgba(255, 255, 255, 0.2);
      盒子陰影: 0 5px 20px rgba(255, 255, 255, 0.5);
    }

    /* 下拉式選單 */
    。下拉式選單 {
      位置:絕對;
      頂部:70 像素;
      左:0;
      寬度:260 像素;
      背景:rgba(255, 255, 255, 0.1);
      邊框半徑:12px;
      盒子陰影:0 10px 30px rgba(0, 0, 0, 0.5);
      背景過濾器:模糊(15px);
      內邊距:10px;
      顯示:無;
      彈性方向:列;
    }

    .dropdown:懸停 .dropdown-menu {
      顯示:柔性;
    }

    .dropdown-menu li {
      列表樣式:無;
      內邊距:12 像素 15 像素;
      顯示:柔性;
      對齊項目:居中;
      間隙:10px;
      遊標:指針;
      顏色:#fff;
      邊框半徑:8px;
      溢出:隱藏;
      過渡:背景 0.3 秒緩動,框陰影 0.3 秒緩動,顏色 0.3 秒緩動;
    }

    /* 圖示和文字 */
    .dropdown-menu li i {
      字體大小:24px;
      過渡:顏色0.3s緩和;
    }

    .dropdown-menu li span {
      字體大小:16px;
      過渡:顏色0.3s緩和;
    }

    /* 懸停效果 */
    .dropdown-menu li:hover {
      背景:線性漸變(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
      框陰影: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(255, 0, 255, 0.4);
      顏色:#fff;
    }.dropdown-menu li:懸停 i {
      顏色:#0ff; /* 霓虹青色 */
    }

    .dropdown-menu li:懸停範圍{
      顏色:#f0f; /* 霓虹洋紅色 */
    }
  風格>
頭>

  <div>




          </div>

            
        
登入後複製

以上是✨ 用玻璃造型和霓虹燈效果改變您的下拉式選單! ✨的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板