在 Instagram 上关注我们：https://www.instagram.com/webstreet_code/

    
    
    抽屉标题>
    
   

    *{
        保证金：0；
        填充：0；
        框大小：边框框；
        字体系列：'Poppins'，sans-serif；
    }

    身体 {
            背景颜色：#141625；
            显示：柔性；
            对齐项目：居中；
            justify-content：flex-start；
            高度：100vh；
            溢出：隐藏；
        }
        。汉堡包{
            位置：绝对；
            顶部：20 像素；
            左：18 像素；
            光标：指针；
            z 索引：10；
        }

        .汉堡.线{
            宽度：35 像素；
            高度：4px；
            背景颜色：#f0a500；
            边距：6px 0；
            边框半径：2px；
            过渡：全部 0.4s 缓和；
        }

        .菜单栏{
            位置：固定；
            顶部：0；
            左：0；
            宽度：80px；
            高度：100%；
            背景颜色：#1f2235；
            盒子阴影：2px 0 15px rgba(0, 0, 0, 0.6);
            溢出：隐藏；
            过渡：宽度0.4s缓和；

        }

        .menu-bar.open {
            宽度：220px；
        }

        .菜单栏 ul {
            列表样式：无；
            内边距：80px 10px；
        }
        .menu-bar ul li {
            显示：柔性；
            对齐项目：居中；
            内边距：15px；
            颜色：#b2becd；
            光标：指针；
            过渡：背景颜色 0.3s 缓动；
            左边框：4px实心透明；
        }

        .menu-bar ul li i {
            字体大小：24px；
            右边距：20px；
            过渡：变换0.3s缓和；
        }
        .menu-bar ul li span {
            不透明度：0；
            字体大小：16px；
            过渡：不透明度 0.4s 缓动；
            空白：nowrap；
        }

        .menu-bar.open ul li span {
            不透明度：1；
        }

        .menu-bar ul li:hover {
            背景颜色：#282a40；
            盒子阴影：0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .menu-bar ul li:悬停 i {
            变换：缩放（1.2）；
        }

        .menu-bar ul li.active {
            背景颜色：#f0a500；
            边框半径：20px；
            颜色：#1f2235；
            左边框：4px 实线#f0a500；
        }

        .menu-bar ul li.active i {
            颜色：#1f2235；
        }

        .menu-bar ul li.active span {
            颜色：#1f2235；
        }

















   风格>
头>