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