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

代码语言:html

所属分类:菜单导航

代码描述:div+css实现黑色酷炫光感照明导航菜单选中效果代码

代码标签: div css 黑色 酷炫 光感 照明 导航 菜单 选中

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>SmartShort – 侧边栏选中效果</title>
<style>
/* ------- 颜色变量,方便微调 ------- */
:root{
  --bg:#0d0e0f;             /* 整体背景 */
  --panel:#111213;          /* 侧栏背景 */
  --txt:#e3e6ea;            /* 文字高亮 */
  --txt-muted:rgba(255,255,255,.55);
  --hover:rgba(255,255,255,.06);
  --active-bg:rgba(255,255,255,.08);
  --glow:#adff2f;           /* 荧光绿 */
}

/* ------- 全局 ------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;}
body{
  display:flex;
  background:var(--bg);
  font-family:Inter,Segoe UI,Helvetica,Arial,sans-serif;
  color:var(--txt);
}

/* ------- 侧边栏容器 ------- */
.sidebar{
  width:260px;
  background:var(--panel);
  padding:22px 0;
  display:flex;
  flex-direction:column;
  position:relative;               /* 让指示条绝对定位基准 */
  border-top-right-r.........完整代码请登录后点击上方下载按钮下载查看

网友评论0