Difference between revisions of "Template:TUST China/css/nav"

Revision as of 14:31, 5 October 2018 (view source) Zenuken (Talk | contribs) ← Older edit		Revision as of 14:56, 5 October 2018 (view source) Zenuken (Talk | contribs) Newer edit →
Line 142:		Line 142:
	position: relative;		position: relative;
	display: block;		display: block;
−	width: 100%;	+	width: 150%;
−	height: 30px;	+	height: 40px;
	padding-top: 15px;		padding-top: 15px;
	margin: 0px;		margin: 0px;

---

Revision as of 14:56, 5 October 2018

@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: #17BEBB;

}

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: 99;

   /*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: 150%;
   height: 40px;
   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 5px;

} .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;

}