svg+css实现酷黑暗色垂直图标菜单悬浮效果代码-html代码-BFW代码库

svg+css实现酷黑暗色垂直图标菜单悬浮效果代码

代码语言：html

代码描述：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;
        .........完整代码请登录后点击上方下载按钮下载查看