Html
    Css
    Js

    
                        
* {
	box-sizing:border-box;
}
body {
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	background-color:#ededed;
	color:slategrey;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
}
a {
	text-decoration:none;
}
h1 {
	font-family:'Bree Serif',serif;
	margin-top:0px;
	margin-bottom:0px;
	letter-spacing:1px;
	text-shadow:0 1px 2px rgba(0,0,0,0.1);
	text-align:center;
}
.wrapper {
	max-width:800px;
	margin:0 auto;
}
ul {
	list-style-type:none;
	padding-left:0px;
}
nav {
	position:relative;
}
nav ul {
	display:-webkit-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	width:100%;
}
nav ul li {
	width:20%;
	text-align:center;
}
nav ul li a {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	color:slategrey;
	-webkit-transition:all .15s ease;
	transition:all .15s ease;
}
nav ul li a:hover {
	color:#434d57;
	-webkit-transition:all .15s ease;
	transition:all .15s ease;
}
nav ul li a.selected {
	-webkit-transition:all .15s ease;
	transition:all .15s ease;
	color:white;
}
#navActiveBG {
	position:absolute;
	top:14px;
	width:20%;
	height:24px;
	background:slategrey;
	border-radius:4px;
	-webkit-transition:-webkit-transform 0.5s cubic-bezier(0.7,-0.2,0.2,1.5);
	transition:-webkit-transform 0.5s cubic-bezier(0.7,-0.2,0.2,1.5);
	transition:transform 0.5s cubic-bezier(0.7,-0.2,0.2,1.5);
	transition:transform 0.5s cubic-bezier(0.7,-0.2,0.2,1.5),-webkit-transform 0.5s cubic-bezier(0.7,-0.2,0.2,1.5);
	will-change:transform;
	z-index:-1;
	box-shadow:0 3px 6px rgba(0,0,0,0.11),0 1px 3px rgba(0,0,0,0.08);
}
.content {
	margin-top:2rem;
	position:relative;
}
.content .section {
	-webkit-animation:contentSwitch .5s forwards;
	/* Safari 4+ */
  /* Fx 5+ */
  /* Opera 12+ */
  animation:contentSwitch .5s forwards;
	/* IE 10+,Fx 29+ */
  display:none;
	background-color:white;
	padding:30px;
	border-radius:4px;
	box-shadow:0 3px 6px rgba(0,0,0,0.11),0 1px 3px rgba(0,0,0,0.08);
	color:white;
}
.content .section:nth-child(1) {
	display:block;
	background:#f857a6;
	/* fallback for old browsers */
  background:-webkit-linear-gradient(45deg,#ff5858,#f857a6);
	/* Chrome 10-25,Safari 5.1-6 */
  background:linear-gradient(45deg,#ff5858,#f857a6);
	/* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
}
.content .section:nth-child(2) {
	background:#de6262;
	/* fallback for old browsers */
  background:-webkit-linear-gradient(45deg,#de6262,#ffb88c);
	/* Chrome 10-25,Safari 5.1-6 */
  background:linear-gradient(45deg,#de6262,#ffb88c);
	/* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
}
.content .section:nth-child(3) {
	background:#5f2c82;
	/* fallback for old browsers */
  background:-webkit-linear-gradient(45deg,#49a09d,#5f2c82);
	/* Chrome 10-25,Safari 5.1-6 */
  background:linear-gradient(45deg,#49a09d,#5f2c82);
	/* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
}
.content .section:nth-child(4) {
	background:#7474BF;
	/* fallback for old browsers */
  background:-webkit-linear-gradient(45deg,#348AC7,#7474BF);
	/* Chrome 10-25,Safari 5.1-6 */
  background:linear-gradient(45deg,#348AC7,#7474BF);
	/* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
}
.content .section:nth-child(5) {
	background:#283048;
	/* fallback for old browsers */
  background:-webkit-linear-gradient(45deg,#859398,#283048);
	/* Chrome 10-25,Safari 5.1-6 */
  background:linear-gradient(45deg,#859398,#283048);
	/* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
}
@-webkit-keyframes contentSwitch {
	0% {
	opacity:0;
}
10% {
	opacity:0;
	-webkit-filter:blur(15px);
	-moz-filter:blur(15px);
	-o-filter:blur(15px);
	-ms-filter:blur(15px);
	filter:blur(15px);
}
100% {
	opacity:1;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery实现的酷炫渐变滑动导航

使用jQuery插件实现横向导航菜单,特点:

1. 滑动含动画效果

2. 背景层为多渐变背景

3. 兼容性好

0