svg+css实现炫酷垂直图标菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:svg+css实现炫酷垂直图标菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <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: 0.8rem; box-shadow: 2rem 3rem 3.5rem 0.1rem rgba(233, 255, 0, 0.15); transition: 0.25s filter ease-in-out, 0.25s box-shadow ease-in-out; } .sidebar:hover { box-shadow: 1rem 1rem 2.5rem 0.1rem rgba(233, 255, 0, 0.35); } .sidebar::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.8rem; -webkit-backdrop-filter: blur(2rem); backdrop-filter: blur(2rem); } .sidebar .sidebar__nav { position: relative; display: flex; width: 100%; padding: 0.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: 0.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: 0.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: 0.2s fadeInOutScale linear forwards; animation: 0.2s fadeInOutScale linear forwards; } .sidebar .sidebar__nav .nav__item:hover .item__icon { opacity: 1; fill: #000; transform: scale3d(1, 1, 1); transition: 0.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: 0.7; transition: 0.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: 0.4rem; will-change: transform, opacity, visibility; transform-style: preserve-3d; transform: translate3d(4rem, 0, 0); opacity: 0; visibility: hidden; transition: 0.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> <!-- partial:index.partial.html --> <nav class="sidebar"> <ul class="sidebar__nav"> <li class="nav__item"> <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 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,1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0