jquery实现菜单导航条点击选择多种动画效果代码-html代码-BFW代码库

jquery实现菜单导航条点击选择多种动画效果代码

代码语言：html

代码描述：jquery实现菜单导航条点击选择多种动画效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        body {
        margin: 0;
        padding: 0;
    }
    h1 {
        text-align: center;
        font-size: 16px;
        margin-top: 10px;
    }
    .box {
        background-color: #202932;
        margin: 50px 200px;
    }
    .f-nav {
        height: 60px;
        overflow: hidden;
        transition: all 1s;
        display: block;
        position: relative;
        padding: 0;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
        background-color: #202932;
    }
    .f-nav li {
        padding: 0;
        margin: 0;
        float: left;
        height: 60px;
        line-height: 60px;
        position: relative;
        z-index: 100;
        display: inline-block;
        list-style-type: none;
        width: 100px;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
    .sideline {
        position: absolute;
        background-color: #208ff9;
        left: 0;
        top: 0;
        color: #fff;
        min-height: 30px;
        z-index: 1;
        height: 60px;
        line-height: 60px;
        display: inline-block;
        list-style-type: none;
        width: 100px;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
    .f-nav li.active {
        background-color: #208ff9;
        color: #fff;
    }
    .f-nav li.fontNav {
        background-color: #208ff9;
        color: #fff;
        animation: fontNav .8s;
    }
    .f-nav li.downNav {
        background-color: #208ff9;
        color: #fff;
        animation: downNav .8s;
    }
    .f-nav li.leftNav {
        background-color: #208ff9;
        color: #fff;
        animation: leftNav .8s;
    }
    .f-nav li.rightNav {
        background-color: #208ff9;
        color: #fff;
        animation: rightNav .8s;
    }
    /*左边缘*/
    .f-nav li.edgeLeft {
        background-color: #208ff9;
        color: #fff;
        animation: edgeLeft .8s;
    }
    /*右边缘*/
    .f-nav li.edgeRight {
        background-color: #208ff9;
        color: #fff;
        animation: edgeRight .8s;
    }
    /*从中间变大*/
    .f-nav li.scaleChange {
        background-color: #208ff9;
        color: #fff;
        animation: scaleChange .8s;
    }
     @keyframes scaleChange {
     0% {
     transform: scale(0);
    },  50% {
     transform: scale(.5);
    },  100% {
     transform: scale(1);
    }
    }
     @keyframes fontNav {
     0% {
     transform: translate(0, -100%);
    },  50% {
     transform: translate(0, -50%);
    },  100% {
     transform: translate(0, 0);
    }
    }
     @keyframes downNav {
     0% {
     transform: translate(0, 100%);
    },  50% {
     transform: translate(0, 50%);
    },  100% {
     transform: translate(0, 0);
    }
    }
     @keyframes leftNav {
     0% {
     transform: translate(-100%, 0%);
    },  50% {
     transform: translate(-50%, 0%);
    },  100% {
     transform: translate(0, 0);
    }
    }
     @keyframes rightNav {
     0% {
     transform: translate(100%, 0%);
    },  50% {
     transform: translate(50%, 0%);
    },  100% {
     transform: translate(0%, 0);
    }
    }
     @keyframes edgeLeft {
     0% {
     transform: translate(-100%, -100%);
    }
     100% {
     transform: translate(0%, 0%);
    }
    }
     @keyframes edgeRight {
     0% {
     transform: translate(100%, 100%);
    }
     100% {
     transform: translate(0%, 0%);
    }
    }
    </style>

</head>

<body>

    <h1>左右滚动</h1>
    <div class="box">
        <ul class="f-nav" id='f-nav'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>

    <h1>从上向下滚动</h1>
    <div class="box">
        <ul class="f-nav" id='f-nav2'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>

    <h1>从下向上滚动</h1>
    <div class="box">
        <ul class="f-nav" id='f-nav3'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>

    <h1>从左边缘向右边缘滚动</h1>
    <div class="box"&g.........完整代码请登录后点击上方下载按钮下载查看