* {
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. 滑动含动画效果
2. 背景层为多渐变背景
3. 兼容性好