css3展开收起导航动画

2020-03-2073次阅读css3

css3展开收起导航动画,自己照猫画虎,仿http://paul-themes.com/html/lewis/demo/home-horizontal.html#Projects凑和用着。

<div class="nav">
            <span class="nav-toggle-title">
                <a href="#">首页</a><a href="#news">新闻资讯</a><a href="#character">人偶资料</a><a href="#world">世界观</a><a href="#gallery">官方资料</a>
            </span>
            <span class="nav-toggle">
                <span class="stick stick-1"></span>
                <span class="stick stick-2"></span>
                <span class="stick stick-3"></span>
            </span>
        </div>
.nav{
    position:absolute;
    top:54px;
    right:84px;
    z-index:10;
}


.nav-toggle{
    position:absolute;
    right:0;
    top:0;
    $width:29px;
    width:$width;
    height:$width;
    cursor:pointer;
}


.stick{
    display:block;
    width:29px;
    height:3px;
    margin-bottom:5px;
    background-color: #fff;
}


.menu-opened{
    .stick-1{
        animation: stick-1-open .85s ease-out forwards
    }
    .stick-2 {
        animation: stick-2-open .85s linear forwards;
        width: 29px;
        margin-left: 0
    }

    .stick-3 {
        animation: stick-3-open .85s linear forwards
    }
    .nav-toggle-title{
        opacity:1;
        width:510px;
    }
}


@keyframes stick-1-open {
    0% {
        width: 29px
    }

    30% {
        width: 3px;
        transform: translate(14px,0px)
    }

    65% {
        width: 3px;
        transform: translate(14px,-29px);
        animation-timing-function: cubic-bezier(0,1,1,1)
    }

    100% {
        width: 0;
        transform: translate(9px,17px)
    }
}


@keyframes stick-2-open {
    65% {
        width: 29px;
        transform: translate(0px,0px) rotate(0deg)
    }

    100% {
        width: 29px;
        transform: translate(0px,0px) rotate(45deg)
    }
}


@keyframes stick-3-open {
    65% {
        transform: translate(0px,0px) rotate(0deg)
    }

    100% {
        transform: translate(0px,-8px) rotate(-45deg)
    }
}

.menu-close{
    .stick-1 {
        width: 3px;
        animation: stick-1-close .85s ease-out forwards
    }
    .stick-2 {
        animation: stick-2-close .85s ease-out forwards;
        margin-left: 0
    }
    .stick-3 {
        animation: stick-3-close .85s ease-out forwards
    }
    .nav-toggle-title{
        opacity: 0;
        width:0;
    }
}


@keyframes stick-1-close {
    0%,70% {
        width: 0;
        transform: translate(0,0)
    }

    100% {
        width: 29px;
        transform: translate(0,0)
    }
}

@keyframes stick-2-close {
    0% {
        width: 29px;
        transform: translate(0px,0px) rotate(45deg)
    }

    20% {
        width: 3px;
        transform: translate(0,0px) rotate(45deg)
    }

    40% {
        width: 0
    }

    65% {
        transform: translate(0,-26px);
        animation-timing-function: cubic-bezier(0,1,1,1)
    }

    80% {
        width: 0
    }

    100% {
        width: 29px;
        transform: translate(0,0px)
    }
}

@keyframes stick-3-close {
    0% {
        width: 29px;
        transform: translate(0px,-8px) rotate(-45deg)
    }

    20% {
        width: 3px;
        transform: translate(0,-8px) rotate(-45deg)
    }

    40% {
    }

    65% {
        transform: translate(0,-35px);
        animation-timing-function: cubic-bezier(0,1,1,1)
    }

    90% {
        width: 3px
    }

    100% {
        width: 29px;
        transform: translate(0,0px)
    }
}

.nav-toggle-title{
    position:absolute;
    right:30px;
    top:0;
    width:0;
    height:21px;
    line-height:1.2;
    font-size:16px;
    transition: all .8s ease-in-out;
    opacity: 0;
    overflow:hidden;
    a{
        color:#fff;
        margin:0 20px 0 22px;
    }
}

给类名nav元素js切换添加删除menu-opened、menu-close类名即可。

收起的时候,圆点在左上方展开,如果想要中间展开,不妨试试Flex弹性布局

.nav-toggle{
    position:absolute;
    right:0;
    top:0;
    $width:29px;
    width:$width;
    height:$width;
    cursor:pointer;
    display:inline-flex;
    vertical-align:middle;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}


.stick{
    width:29px;
    height:3px;
    margin-bottom:5px;
    background-color: #fff;
}

 

上一篇: vue下返回顶部功能实现  下一篇: js判断浏览器兼容css中webkit、Moz、O、ms  

css3展开收起导航动画相关文章