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: transla.........完整代码请登录后点击上方下载按钮下载查看