css实现简洁导航条点击滑动效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现简洁导航条点击滑动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" rel="stylesheet"> <style> :root { --bg: #F8F8FF; --nav-bg: #fff; --primary: #2F71D6; --nav-item-color: #8F9A9E; --nav-border: #8F9A9E; --white: #fff; --gap: 0.5rem; --item-width: 5.25rem; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Mulish", sans-serif; font-size: 16px; display: grid; place-items: center; height: 100vh; background: var(--background); padding: 0.1rem; } .navigation { max-width: fit-content; display: flex; justify-content: center; width: 100%; padding: 1rem 2rem; background: var(--nav-bg); box-shadow: 0px 4px 16px 0px rgba(148, 156, 169, 0.15); border-radius: 1rem; border: 1px solid rgba(148, 156, 169, 0.15); user-select: none; } .nav-list { display: flex; list-style-type: none; gap: var(--gap); position: relative; } .nav-list>li { width: var(--item-width); display: flex; flex-direction: column; align-items: center; } .nav-list>li>a { display: flex; flex-direction: column; align-items: center; max-width: 4rem; gap: 0.5rem; width: 100%; color: var(--nav-item-color); text-decoration: none; transition: all 0.2s ease-in-out; } .nav-list>li>a>svg { width: 2rem; height: 2rem; stroke: var(--nav-item-color); transition: all 0.2s ease-in-out; } .nav-list>li:hover>a { color: var(--primary); } .nav-list>li:hover>a>svg { stroke: var(--primary); } .nav-list>.active>a { color: var(--primary); } .nav-list>.active>a>svg { stroke: var(--primary); } .active-bar { position: absolute; top: -1rem; min-width: var(--item-width); height: 0.5rem; background: var(--primary); z-index: 1; transition: 0.5s; } .nav-list li:nth-child(1).active~.active-bar { transform: translatex(calc(0)); } .nav-list li:nth-child(2).active~.active-bar { transform: translatex(calc(var(--item-width) + var(--gap))); } .nav-list li:nth-child(3).active~.active-bar { transform: translatex(calc(var(--item-width)*2 + var(--gap)*2)); } .nav-list li:nth-child(4).active~.active-bar { transform: translatex(calc(var(--item-width)*3 + var(--gap)*3)); } </style> </head> <body> <nav class="navigation"> <ul class="nav-list"> <li class="active"> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 12l-2 0l9 -9l9 9l-2 0" /> <path d="M5 12v7a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0