css实现黑色大气带图标导航条效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现黑色大气带图标导航条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body { height: 100vh; width: 100vw; } body { margin: 0; display: grid; place-items: center; background-color: #222; font-family: system-ui, sans-serif; } nav, .nav-item { display: flex; } nav { border-radius: 6px; background-image: linear-gradient(#303030 13%, #1e1e1e 40%, #0c0d11 86%); color: rgba(255, 255, 255, 0.6); text-shadow: 0 -2px 0 black; cursor: pointer; box-shadow: 1px 2px 4px #141414, 0 4px 12px #0a0a0a; } .nav-item { flex-direction: row-reverse; font-size: 0.8999rem; line-height: 1rem; align-items: center; min-width: 120px; justify-content: space-between; transition: all 80ms ease; } .nav-item.active { color: #bb99ff; text-shadow: 0 0 3px rgba(153, 102, 255, 0.7); } .nav-item:not(.active):hover { color: rgba(255, 255, 255, 0.87); } .nav-item:hover > .icon .subicon { height: 32px; width: 32px; border-radius: 32px; top: -16px; right: -16px; border-color: white; } .nav-item:not(:first-of-type) { border-left: 1px solid #3c3c3c; } .nav-item:not(:last-of-type) { border-right: 0.1rem solid black; } .nav-item a { color: inherit; text-decoration: none; padding: 1ch; } .nav-item .icon { padding: 1ch; position: relative; } .nav-item .icon .subicon { text-shadow: none; transition: all 40ms ease; position: absolute; top: -3px; right: -3px; background: red; color: white; box-shadow: 0 0 4px rgba(41, 41, 41, 0.405); width: 18px; height: 18px; border-radius: 14p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0