svg+css实现酷黑暗色垂直图标菜单悬浮效果代码
代码语言:html
所属分类:菜单导航
代码描述:svg+css实现酷黑暗色垂直图标菜单悬浮效果代码
代码标签: svg css 酷黑 暗色 垂直 图标 菜单 悬浮
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> html,body { padding:0; margin:0 } html { font-size:62.5% } body { display:flex; width:100%; height:100vh; align-items:center; justify-content:center; background-image:linear-gradient(135deg,#006a89 -80%,#000 80%); font-size:1.4rem } .sidebar { position:relative; display:flex; width:8rem; background-color:#000; border-radius:.8rem; box-shadow:2rem 3rem 3.5rem .1rem rgba(233,255,0,0.15); transition:.25s filter ease-in-out,0.25s box-shadow ease-in-out } .sidebar:hover { box-shadow:1rem 1rem 2.5rem .1rem rgba(233,255,0,0.35) } .sidebar::before { content:" "; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:.8rem; -webkit-backdrop-filter:blur(2rem); backdrop-filter:blur(2rem) } .sidebar .sidebar__nav { position:relative; display:flex; width:100%; padding:.5rem; margin:0; flex-direction:column; justify-content:center; list-style:none } .sidebar .sidebar__nav .nav__item { position:relative; display:flex; width:100%; height:6rem; align-items:center; justify-content:center; border-radius:.4rem; cursor:pointer } .sidebar .sidebar__nav .nav__item:before { content:" "; position:absolute; z-index:2; top:auto; left:auto; width:7rem; height:7rem; border-radius:.4rem; background-color:#e9ff00; will-change:transform,opacity; transform-style:preserve-3d; transform-origin:center center; transform:scale3d(0,0,0); opacity:0 } .sidebar .sidebar__nav .nav__item:hover:before { -webkit-animation:.2s fadeInOutScale linear forwards; animation:.2s fadeInOutScale linear forwards } .sidebar .sidebar__nav .nav__item:hover .item__icon { opacity:1; fill:#000; transform:scale3d(1,1,1); transition:.3s ease all } .sidebar .sidebar__nav .nav__item:hover .item__tooltip { transform:translate3d(3rem,0,0); opacity:1; visibility:visible } .sidebar .sidebar__nav .nav__item .item__icon { position:relative; z-index:9; width:3rem; height:3rem; fill:#e9ff00; will-change:transform,opacity; transform-style:preserve-3d; transform-origin:center center; transform:scale3d(0.9,0.9,0.9); opacity:.7; transition:.2s transform ease-in-out } .sidebar .sidebar__nav .nav__item .item__tooltip { position:absolute; left:100%; display:flex; height:2rem; padding:1rem; align-items:center; background-color:#000; border-radius:.4rem; will-change:transform,opacity,visibility; transform-style:preserve-3d; transform:translate3d(4rem,0,0); opacity:0; visibility:hidden; transition:.25s ease all } .sidebar .sidebar__nav .nav__item .item__tooltip::before { content:" "; position:absolute; left:-0.9rem; top:auto; width:0; height:0; border-top:1rem solid transparent; border-bottom:1rem solid transparent; border-right:1rem solid #000 } .sidebar .sidebar__nav .nav__item .item__tooltip .tooltip__text { font-family:"Roboto",sans-serif; font-size:1.6rem; font-weight:600; color:#e9ff00; white-space:nowrap } @-webkit-keyframes fadeInOutScale { 0% { opacity:0; transform:scale3d(0,0,0) } 100% { opacity:1; transform:scale3d(0.7,0.7,0.7) } }@keyframes fadeInOutScale { 0% { opacity:0; transform:scale3d(0,0,0) } 100% { opacity:1; transform:scale3d(0.7,0.7,0.7) } } </style> </head> <body> <nav class="sidebar"> <ul class="sidebar__nav"> <li class="nav__item"><a href="#"><svg class="item__icon" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M288,256c52.79,0,99.43-49.71,104-110.82,2.27-30.7-7.36-59.33-27.12-80.6C345.33,43.57,318,32,288,32c-30.24,0-57.59,11.5-77,32.38-19.63,21.11-29.2,49.8-27,80.78C188.49,206.28,235.12,256,288,256Z"></path><path d="M495.38,439.76c-8.44-46.82-34.79-86.15-76.19-113.75C382.42,301.5,335.83,288,288,288s-94.42,13.5-131.19,38c-41.4,27.6-67.75,66.93-76.19,113.75-1.93,10.73.69,21.34,7.19,29.11A30.94,30.94,0,0,0,112,480H464a30.94,30.94,0,0,0,24.21-11.13C494.69,461.1,497.31,450.49,495.38,439.76Z"></path><path d="M104,288V248h40a16,16,0,0,0,0-32H104V176a16,16,0,0,0-32,0v40H32a16,16,0,0,0,0,32H72v40a16,16,0,0,0,32,0Z"></path></svg></a> <div class="item__tooltip"><span.........完整代码请登录后点击上方下载按钮下载查看
网友评论0