几个动画效果的导航栏

2017-03-11

导航栏

导航栏对于前端的意义不言而喻，随着CSS3的出现，为各种各样附加动画效果的导航栏建立提供了便利，使得导航栏动画效果的引用变得简单，无需脚本文件即可。这篇博客可能有点长

HTML

得先有个导航

<div class="container">
    <!--导航条-->
    <div class="navbar">
        <ul>
            <li>Style1
                <!--Bootstrap的类名设置类似，有木有-->
                <ul class="drop-menu menu-1">
                    <li>ONE</li>
                    <li>TWO</li>
                    <li>THREE</li>
                    <li>FOUR</li>
                    <li>FIVE</li>
                    <li>SIX</li>
                </ul>
            </li>
            <li>Style2
                <ul class="drop-menu menu-2">
                    <li>ONE</li>
                    <li>TWO</li>
                    <li>THREE</li>
                    <li>FOUR</li>
                    <li>FIVE</li>
                    <li>SIX</li>
                </ul>
            </li>
            <li>Style3
                <ul class="drop-menu menu-3">
                    <li>ONE</li>
                    <li>TWO</li>
                    <li>THREE</li>
                    <li>FOUR</li>
                    <li>FIVE</li>
                    <li>SIX</li>
                </ul>
            </li>
            <li>Style4
                <ul class="drop-menu menu-4">
                    <li>ONE</li>
                    <li>TWO</li>
                    <li>THREE</li>
                    <li>FOUR</li>
                    <li>FIVE</li>
                    <li>SIX</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

普通样式

html,body,div,ul,li{
    margin: 0;
    padding:0;
    font-family:"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size:17px;
}
html,body{
    background: #86908e;
}
ul,li{
    list-style:none;
}
.container{
    width: 650px;
    height: 500px;
    background: #fff;
    border: 2px solid #b1b1b1;
    border-radius: 10px;
    margin:30px auto;
    -webkit-box-shadow: 2px 13px 10px 3px  #2d2d2d;
    -moz-box-shadow: 2px 2px 3px 3px  #474747;
    box-shadow: 2px 2px 3px 3px  #474747;
    position: relative;
}
.container .navbar{
    display: inline-block;
    text-align: center;
    position: absolute;
    margin: 0 10px;
    padding: 50px;
}
.container li:hover{
    background: #45a8e5;
}
.container .navbar > ul{
    display: inline-block;/*没有高度，所以让其内部元素呈现block，以撑开元素显现，自己本身确式inline挨个排列*/
    color:white;
    background: #474747;
    border-radius: 4px;
}
.container .navbar >ul li{
    position: relative;
    float: left;
    width: 120px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
}
.container .navbar ul .drop-menu{
    width:100%;
    position: absolute;
    left:0;
    top:100%;
}
.container .navbar ul .drop-menu li{
       background: #a8a8a8;
}
.container .navbar ul .drop-menu li:hover{
    background: #8a8a8a;
}
.container .navbar ul .drop-menu li:first-child{
    border-radius: 2px 2px 0 0 ;
}
.container .navbar ul .drop-menu li:last-child{
    border-radius: 0 0 5px 5px;
}
.container .navbar ul .drop-menu li{
    display: none;
}
.container .navbar > ul > li:hover .drop-menu li{
    display: block;
}

动画效果

/*1.设置各部分的基轴*/
 .navbar li:hover > ul.drop-menu{
    perspective: 1000px;
}
/*2.设置动画起始点*/
li:hover > ul.drop-menu.menu-1 li {
    transform-origin: top left;
    opacity: 0;
}
li:hover > ul.drop-menu.menu-2 li {
    transform-origin: top center;
    opacity: 0;
}
li:hover > ul.drop-menu.menu-1 li {
    transform-origin: top center;
    opacity: 0;
}
li:hover > ul.drop-menu.menu-1 li {
    transform-origin: top center;
    opacity: 0;
}

现在以menu-1为例

/*a.声明动画*/
@keyframes menu-1 {
    0% {
        opacity: 0;
        transform: rotateZ(90deg);
    }
    70% {
        transform: skewX(10deg);
    }
    100% {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}
/*b.调用，每个li间隔150ms执行*/
li:hover > ul.drop-menu.menu-1 li:nth-child(1) {
    animation-name: menu-1;/*引入动画名*/
    animation-duration: 300ms;/*动画周期时间*/
    animation-delay: -150ms;/*y动画延迟时间*/
    animation-fill-mode: forwards;/*填充模式*/
    animation-timing-function: ease-in-out;/*动画曲线*/
}
li:hover > ul.drop-menu.menu-1 li:nth-child(2) {
    animation-name: menu-1;
    animation-duration: 300ms;
    animation-delay: 0ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(3) {
    animation-name: menu-1;
    animation-duration: 300ms;
    animation-delay: 150ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(4) {
    animation-name: menu-1;
    animation-duration: 300ms;
    animation-delay: 300ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(5) {
    animation-name: menu-1;
    animation-duration: 300ms;
    animation-delay: 450ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(6) {
    animation-name: menu-1;
    animation-duration: 300ms;
    animation-delay: 600ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

因为动画调用都雷同，这里就不单独展示，只展示各menu的动画声明

@keyframes menu-2 {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    70% {
        transform: rotateX(10deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}
@keyframes menu-3 {
    0% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    70% {
        transform: rotateY(10deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}
@keyframes menu-4 {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    70% {
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}