* { 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. 兼容性好