scss CSS只有汉堡包

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss CSS只有汉堡包相关的知识,希望对你有一定的参考价值。

   .menu-toggle{
        display: none;
        span,
        span:before,
        span:after{
            cursor: pointer;
            border-radius: 1px;
            height: 3px;
            width: 23px;
            //Background Color
            background: #fff;
            //Background Color
            position: absolute;
            display: block;
            content: '';
            @include transition(all, .25s ease-out);
        }
        span:before{
            top: -7px;
        }
        span:after{
            bottom: -7px;
        }
        &.active{
            span{
                  background-color: transparent;
                  &:before,
                  &:after{
                    top: 0;
                  }
                  &:before{
                    @include transform(rotate(45deg));
                  }
                  &:after{
                    @include transform(rotate(-45deg));
                  }
            }
        }
    }

以上是关于scss CSS只有汉堡包的主要内容,如果未能解决你的问题,请参考以下文章

scss SCSS - 移动汉堡包

将 SCSS 和 JS 文件添加到 html,无法正常工作

scss 轻松创建汉堡包按钮。

未捕获的TypeError无法读取null的属性“classlist”

scss 汉堡菜单

scss Sass汉堡到“x”关闭