div+css实现黑色酷炫导航菜单选中效果代码-html代码-BFW代码库

div+css实现黑色酷炫导航菜单选中效果代码

代码语言：html

代码描述：div+css实现黑色酷炫导航菜单选中效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>侧边栏选中效果示例</title>
  <style>
    :root{
      --bg: #070708;
      --panel: #0f1113;
      --muted: rgba(255,255,255,0.06);
      --text: #d8dbe0;
      --muted-text: rgba(255,255,255,0.45);
      --accent-a: #7cff36;
      --accent-b: #00e6a5;
    }

    * { box-sizing: border-box; }
    html,body { height:100%; margin:0; background: linear-gradient(180deg,#0b0b0b 0%, #060606 100%); font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); -webkit-font-smoothing:antialiased; }

    .app {
      display:flex;
      gap:24px;
      padding:28px;
      min-height:100vh;
      align-items:flex-start;
    }

    /* 侧边栏 */
    .sidebar{
      width:280px;
      background: linear-gradient(180deg,#101113,#0b0b0c);
      border-radius:14px;
      padding:18px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.6);
      overflow: visible; /* 允许指示条溢出显示 */
    }

    .logo{
      display:flex;
      gap:12px;
      align-items:center;
      color:#f5f7f8;
      font-weight:600;
      margin-bottom:18px;
    }
    .logo .mark{
      width:36px; height:36px; border-radius:8px;
      display:flex; align-items:center; justify-content:center;
      background: linear-gradient(135deg,#ffffff10,#ffffff05);
      color:white;
      font-weight:700;
    }

    nav h4, .proje.........完整代码请登录后点击上方下载按钮下载查看