js+css实现全屏玻璃体透明侧边栏菜单伸缩效果代码-html代码-BFW代码库

js+css实现全屏玻璃体透明侧边栏菜单伸缩效果代码

代码语言：html

代码描述：js+css实现全屏玻璃体透明侧边栏菜单伸缩效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        list-style: none;
        box-sizing: border-box;
}

body {
        min-height: 100vh;
        background-image: url('//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png');
        background-repeat: no-repeat;
        background-size: cover;
        font-family: 'Roboto', sans-serif;
}

.sidebar {
        width: 120px;
        height: 100%;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        background: rgba(10, 10, 10, .65);
        box-shadow: 0 8px 32px rgb(2, 4, 24);
        border-right: 2px solid rgba(255, 255, 255, .09);
        transition: .4s ease-in-out;
}

.sidebar.open {
        width: 360px;
}

.sidebar .logo {
        width: 100%;
        height: 240px;
        padding: 40px 0;
        display: grid;
        align-items: center;
        justify-items: center;
}

.sidebar .logo img {
        width: 56px;
        transition: .4s;
}

.sidebar.open .logo img {
        width: 96px;
}

.sidebar .logo h3 {
        color: #fff;
        font-size: 36px;
        margin-top: 12px;
        font-variant: small-caps;
        pointer-events: none;
        scale: 0;
        opacity: 0;
}

.sidebar.open .logo h3 {
        scale: 1;
        opacity: 1;
        transition: .4s;
        transition-delay: .2s;
}

.sidebar .nav-title {
        color: #dadada;
        margin: 40px 0 18px;
        pointer-events: none;
        opacity: 0;
}

.sidebar.open .nav-title {
        opacity: 1;
        transition: .4s;
        transition-delay: .2s;
}

.sidebar nav {
        padding: 0 30px;
}

.sidebar nav .nav-item {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: 4px;
        width: 100%;
        height: 56px;
        padding: 0 16px;
        margin: 8px 0;
        color: #fff;
        transition: .3s;
}

.sidebar nav .nav-item.active {
        background: #ff328e !important;
}

.sidebar nav .nav-item:hover {
        background: .........完整代码请登录后点击上方下载按钮下载查看