Template:TUST China/css/nav
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1535017830777'); /* IE9*/
src: url('iconfont.eot?t=1535017830777#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1535017830777') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1535017830777#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont-menu {
font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-ifamilypractice:before { content: "\e807"; }
.icon-lab:before { content: "\e613"; }
.icon-parts:before { content: "\e636"; }
.icon-team:before { content: "\e6ce"; }
.icon-project:before { content: "\e633"; }
.icon-notebook:before { content: "\e709"; }
.icon-shujumoxing:before { content: "\e6ef"; }
/*---------------------------icon--------------------------------------*/
html, body {
width:100%; margin: 0;/*清除默认样式*/ padding: 0; height: 2000px; background-color: #fff;
}
ul,li{
list-style: none; font-family: Georgia; font-size: 1.1em;
} a{
list-style: none; color: black; text-decoration: none; padding: 0; margin: 0;
} .nav-container{
width: 100%; top: 5%; position: fixed; z-index: 999;
/*background-color:rgba(0,255,255,0.5);*/
} .nav{
float: right; /*background-color:rgba(0,0,255,0.5);*/ width: 100%; height: 70px;
}
.nav li{
float:right;
width: 8%; height: 70px;
text-align: center; margin: 0px 15px;
} .navbar-control{
float: right; display: inline-block; height: 60px; width: 8%; background-color:rgba(255,255,255,0.5);
} .mainmenu{
display: block; position: relative; float: right; width: 100%;
height: 60px; text-align: center;
background-color:rgba(255,255,255,0.5); -webkit-transition: all .1s; -moz-transition: all .15s; -ms-transition: all .15s; -o-transition: all .15s; transition: all .15s;
} .mainmenu span{
font-size: 1vw;
} .mainmenu i{
display: block; margin-top:8px; height: 8px; font-size: 1.7vw;
} .dropdown-menu{
position: relative; max-height: 0; text-align: center; padding: 0px; top:12px;
-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px;
} .dropdown-menu li{
position: relative; display: block; width: 100%; height: 30px; padding-top: 15px; margin: 0px; font-size: 1.0vw; border-bottom: solid mediumvioletred; background-color:rgba(255,255,255,0.5); opacity: 0;
-webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: transform .4s,opacity .4s; -moz-transition: transform .4s,opacity .4s; -ms-transition: transform .4s,opacity .4s; -o-transition: transform .4s,opacity .4s; transition: transform .4s,opacity .4s;
}
.dropdown-menu a {
color: #5e5e5e;
} .mainmenu::after,.mainmenu::before{
content:""; display: block; position: absolute; top: 0; width: 15px; height: 100%; background-color:rgba(255,255,255,0.5);
} .mainmenu::after{
right: 100%;
} .mainmenu::before{
left: 100%;
} .second-nav{
display: block; height: 130px; width: 100%;
} .second-nav li{
width: 120%; left: 120%; opacity: 0;
-webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: transform .4s,opacity .4s; -moz-transition: transform .4s,opacity .4s; -ms-transition: transform .4s,opacity .4s; -o-transition: transform .4s,opacity .4s; transition: transform .4s,opacity .4s;
} .icon1{
float: right; margin-right: 20px; width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid black; border-bottom: 5px solid transparent
}
.second-nav:hover li{
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
} .nav li:hover .mainmenu {
-webkit-transform: translateY(12px); -moz-transform: translateY(12px); -ms-transform: translateY(12px); -o-transform: translateY(12px); transform: translateY(12px);
} .nav li:hover .mainmenu {
color:#ffff00;
} .nav li:hover .mainmenu:after{
-webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); -ms-transform: skewY(30deg); -o-transform: skewY(30deg); transform: skewY(30deg);
} .nav li:hover .mainmenu:before{
-webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; -webkit-transform: skewY(-30deg); -moz-transform: skewY(-30deg); -ms-transform: skewY(-30deg); -o-transform: skewY(-30deg); transform: skewY(-30deg);
} .nav li:hover .mainmenu:after,.nav li:hover .mainmenu:before{
background-color:rgba(255,255,255,0.7);
} .dropdown-menu a{
color: #5e5e5e;
} .nav li:hover .dropdown-menu>li{
display: block; opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);
} .nav li:hover .dropdown-menu>li:nth-child(1){
-webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
} .nav li:hover .dropdown-menu>li:nth-child(2){
-webkit-transition-delay: 80ms; -moz-transition-delay: 80ms; -ms-transition-delay: 80ms; -o-transition-delay: 80ms; transition-delay: 60ms;
} .nav li:hover .dropdown-menu>li:nth-child(3){
-webkit-transition-delay: 160ms; -moz-transition-delay: 160ms; -ms-transition-delay: 160ms; -o-transition-delay: 160ms; transition-delay: 160ms;
} .nav li:hover .dropdown-menu>li:nth-child(4){
-webkit-transition-delay: 240ms; -moz-transition-delay: 240ms; -ms-transition-delay: 240ms; -o-transition-delay: 240ms; transition-delay: 240ms;
} .nav li:hover .dropdown-menu>li:nth-child(5){
-webkit-transition-delay: 320ms; -moz-transition-delay: 320ms; -ms-transition-delay: 320ms; -o-transition-delay: 320ms; transition-delay: 320ms;
} .nav li:hover .dropdown-menu>li:nth-child(6){
-webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms;
} .navbar-header{
float: right; width: 13%; height: 80px; border-radius:60% 15% 15% 60%; transform:translate(0,-10px); background-color:rgba(255,255,255,0.5);
} .navbar-header{
text-align: center;
} .navbar-header img{
position: absolute; width: 9vw; right: 20px; margin-top:10px; margin-left: 15px;
}
.navbar-header span{
display: none; position: absolute; left: 30%; margin-top:10px; font-size: 2.5vw;
} .navbar-header>a:hover img{
opacity: 0.2;
} .navbar-header>a:hover span{
display: block;
} .nav-container{
float: right; display: inline-block;
} button {
background: none; border: none;
} button::-moz-focus-inner {
border: 0;
}
- focus {
outline: none;
}
- -moz-focus-inner {
border: 0;
} .btn-nav:hover {
cursor: pointer;
} .btn-nav:hover .bar {
background: #17BEBB;
} .bar {
display: block; height: 5px; width: 50px; background: #fff; margin: 10px auto;
} .btn-nav {
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
} .btn-nav:focus {
outline: none;
} .middle {
margin: 0 auto;
} .bar {
-webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease;
} .animated {
z-index: 999;
} .animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(11px); -moz-transform: rotateZ(-45deg) translateY(11px); -ms-transform: rotateZ(-45deg) translateY(11px); -o-transform: rotateZ(-45deg) translateY(11px); transform: rotateZ(-45deg) translateY(11px); width: 25px;
} .animated .arrow-middle-r {
-webkit-transform: translateX(25px); -moz-transform: translateX(25px); -ms-transform: translateX(25px); -o-transform: translateX(25px); transform: translateX(25px);
} .animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-11px); -moz-transform: rotateZ(45deg) translateY(-11px); -ms-transform: rotateZ(45deg) translateY(-11px); -o-transform: rotateZ(45deg) translateY(-11px); transform: rotateZ(45deg) translateY(-11px); width: 25px;
} @keyframes showNav {
from {
right: -100%;
}
to {
right: 0;
}
} @-webkit-keyframes showNav {
from {
right: -100%;
}
to {
right: 0;
}
} @-moz-keyframes showNav {
from {
right: -100%;
}
to {
right: 0;
}
} @-o-keyframes showNav {
from {
right: -100%;
}
to {
right: 0;
}
} .showNav {
-webkit-animation: showNav .5s ease forwards; -moz-animation: showNav 1s ease forwards; -o-animation: showNav 1s ease forwards; animation: showNav .5s ease forwards;
} @keyframes hideNav {
from {
right: 0;
}
to {
right: -100%;
}
} @-webkit-keyframes hideNav {
from {
right: 0;
}
to {
right: -100%;
}
} @-moz-keyframes hideNav {
from {
right: 0;
}
to {
right: -100%;
}
} @-o-keyframes hideNav {
from {
right: 0;
}
to {
right: -100%;
}
} .hideNav {
-webkit-animation: hideNav 1s ease forwards; -moz-animation: hideNav 1s ease forwards; -o-animation: hideNav 1s ease forwards; animation: hideNav 1s ease forwards;
} .hidden {
display: none;
} .block{
display: block;
} .nav-main {
position: relative;
}