(39 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | |||
+ | |||
@font-face {font-family: "iconfont"; | @font-face {font-family: "iconfont"; | ||
− | src: url('iconfont.eot?t= | + | src: url('iconfont.eot?t=1538921198356'); /* IE9*/ |
− | src: url('iconfont.eot?t= | + | src: url('iconfont.eot?t=1538921198356#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
− | url('data:application/x-font-woff;charset=utf-8;base64, | + | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), |
− | url('iconfont.ttf?t= | + | url('iconfont.ttf?t=1538921198356') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ |
− | url('iconfont.svg?t= | + | url('iconfont.svg?t=1538921198356#iconfont') format('svg'); /* iOS 4.1- */ |
} | } | ||
+ | |||
+ | .iconfont { | ||
+ | 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-team:before { content: "\e6ce"; } | ||
+ | |||
+ | .icon-project:before { content: "\e633"; } | ||
+ | |||
+ | .icon-shujumoxing:before { content: "\e6ef"; } | ||
+ | |||
+ | .icon-arrow-fill-right:before { content: "\e635"; } | ||
+ | |||
+ | .icon-home_my_achievements:before { content: "\e654"; } | ||
+ | |||
+ | |||
+ | |||
+ | .iconfont { | ||
+ | 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-team:before { content: "\e6ce"; } | ||
+ | |||
+ | .icon-project:before { content: "\e633"; } | ||
+ | |||
+ | .icon-shujumoxing:before { content: "\e6ef"; } | ||
+ | |||
+ | .icon-home_my_achievements:before { content: "\e654"; } | ||
+ | |||
+ | |||
.iconfont-menu { | .iconfont-menu { | ||
Line 39: | Line 87: | ||
margin: 0;/*清除默认样式*/ | margin: 0;/*清除默认样式*/ | ||
padding: 0; | padding: 0; | ||
− | + | ||
− | background-color: #17BEBB; | + | /*background-color: #17BEBB;*/ |
} | } | ||
Line 56: | Line 104: | ||
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
+ | } | ||
+ | a{ | ||
+ | display: block; | ||
+ | width: inherit; | ||
+ | height: 100%; | ||
} | } | ||
.nav-container{ | .nav-container{ | ||
− | |||
width: 100%; | width: 100%; | ||
top: 5%; | top: 5%; | ||
Line 95: | Line 147: | ||
height: 60px; | height: 60px; | ||
width: 8%; | width: 8%; | ||
− | background-color:rgba( | + | background-color:rgba(250,248,207,0.7); |
} | } | ||
− | + | #mainmenu{ | |
display: block; | display: block; | ||
position: relative; | position: relative; | ||
Line 106: | Line 158: | ||
text-align: center; | text-align: center; | ||
− | + | ||
− | background-color:rgba( | + | background-color:rgba(250,248,207,0.7); |
-webkit-transition: all .1s; | -webkit-transition: all .1s; | ||
-moz-transition: all .15s; | -moz-transition: all .15s; | ||
Line 114: | Line 166: | ||
transition: all .15s; | transition: all .15s; | ||
} | } | ||
− | + | #mainmenu span{ | |
− | font-size: | + | font-size: 1.0vw; |
+ | color: #5e5e5e; | ||
+ | line-height:0px; | ||
} | } | ||
− | + | #mainmenu i{ | |
display: block; | display: block; | ||
− | margin-top: | + | margin-top:15px; |
height: 8px; | height: 8px; | ||
font-size: 1.7vw; | font-size: 1.7vw; | ||
+ | color: #5e5e5e; | ||
+ | } | ||
+ | #mainmenu:hover i{ | ||
+ | color: #17BEBB; | ||
+ | } | ||
+ | #mainmenu:hover span{ | ||
+ | color: #17BEBB; | ||
+ | } | ||
+ | #dropdown-menu>li:hover{ | ||
+ | background-color:rgba(250,248,207,1); | ||
} | } | ||
#dropdown-menu{ | #dropdown-menu{ | ||
Line 127: | Line 191: | ||
position: relative; | position: relative; | ||
− | + | height: auto; | |
text-align: center; | text-align: center; | ||
padding: 0px; | padding: 0px; | ||
Line 147: | Line 211: | ||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
− | height: | + | height: auto; |
− | + | ||
− | + | ||
padding: 10px 0px; | padding: 10px 0px; | ||
margin: 0px; | margin: 0px; | ||
font-size: 1.0vw; | font-size: 1.0vw; | ||
− | + | right: 30px; | |
− | background-color:rgba( | + | |
+ | background-color:rgba(250,248,207,0.7); | ||
opacity: 0; | opacity: 0; | ||
Line 163: | Line 226: | ||
-o-transform: rotateY(90deg); | -o-transform: rotateY(90deg); | ||
transform: rotateY(90deg); | transform: rotateY(90deg); | ||
− | -webkit-transition: transform . | + | -webkit-transition: transform 0.5s ease-in,opacity 0.1s; |
− | -moz-transition: transform . | + | -moz-transition: transform 0.5s ease-in,opacity 0.1s; |
− | -ms-transition: transform . | + | -ms-transition: transform 0.5 ease-in,opacity 0.1s; |
− | -o-transition: transform . | + | -o-transition: transform 0.5s ease-in,opacity 0.1s; |
− | transition: transform . | + | transition: transform 0.5s ease-in,opacity 0.1s; |
} | } | ||
Line 173: | Line 236: | ||
color: #5e5e5e; | color: #5e5e5e; | ||
} | } | ||
− | .mainmenu::after, | + | #mainmenu span{ |
+ | font-size: 0.8vw; | ||
+ | } | ||
+ | #mainmenu::after,#mainmenu::before{ | ||
content:""; | content:""; | ||
display: block; | display: block; | ||
Line 180: | Line 246: | ||
width: 15px; | width: 15px; | ||
height: 100%; | height: 100%; | ||
− | background-color:rgba( | + | background-color:rgba(250,248,207,0.7); |
} | } | ||
− | + | #mainmenu::after{ | |
right: 100%; | right: 100%; | ||
} | } | ||
− | + | #mainmenu::before{ | |
left: 100%; | left: 100%; | ||
Line 192: | Line 258: | ||
.second-nav{ | .second-nav{ | ||
display: block; | display: block; | ||
− | + | color: #5e5e5e; | |
− | height: | + | height: 30px; |
width: 100%; | width: 100%; | ||
− | |||
− | |||
} | } | ||
− | + | .second-nav li:hover{ | |
+ | background-color:rgba(250,248,207,1); | ||
+ | color: #000; | ||
+ | } | ||
.second-nav li{ | .second-nav li{ | ||
− | display: | + | display: none; |
position: relative; | position: relative; | ||
width: 100%; | width: 100%; | ||
− | height: | + | height: auto; |
left: 100%; | left: 100%; | ||
margin: 0px; | margin: 0px; | ||
− | padding | + | padding: 15px 0px; |
− | font-size: | + | font-size: 0.9vw; |
− | + | ||
− | background-color:rgba( | + | background-color:rgba(250,248,207,0.7); |
+ | -webkit-transform: translateY(-40px); | ||
+ | -moz-transform: translateY(-40px); | ||
+ | -ms-transform: translateY(-40px); | ||
+ | -o-transform: translateY(-40px); | ||
+ | transform: translateY(-40px); | ||
+ | |||
+ | |||
opacity: 0; | opacity: 0; | ||
+ | -webkit-transition: opacity .5s ease-in; | ||
+ | -moz-transition: opacity .5s ease-in; | ||
+ | -ms-transition: opacity .5s ease-in; | ||
+ | -o-transition: opacity .5s ease-in; | ||
+ | transition: opacity .5s ease-in; | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | /*.second-nav:active li{*/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | .second-nav: | + | |
+ | /*display: block;*/ | ||
+ | /*opacity: 1;*/ | ||
+ | |||
+ | /*}*/ | ||
+ | #Design:hover li{ | ||
+ | display: block; | ||
opacity: 1; | opacity: 1; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | .nav li:hover | + | #parts:hover li{ |
+ | display: block; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #Experiments:hover li{ | ||
+ | display: block; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #notebook:hover li{ | ||
+ | display: block; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .nav li:hover #mainmenu { | ||
-webkit-transform: translateY(12px); | -webkit-transform: translateY(12px); | ||
-moz-transform: translateY(12px); | -moz-transform: translateY(12px); | ||
Line 252: | Line 325: | ||
transform: translateY(12px); | transform: translateY(12px); | ||
} | } | ||
− | .nav li:hover | + | /*.nav li:hover #mainmenu span,#mainmenu i {*/ |
− | + | /*color:rgba(51,153,204,0.8);*/ | |
− | } | + | /*}*/ |
− | .nav li:hover | + | .nav li:hover #mainmenu:after{ |
-webkit-transform-origin: right top; | -webkit-transform-origin: right top; | ||
-moz-transform-origin: right top; | -moz-transform-origin: right top; | ||
Line 267: | Line 340: | ||
transform: skewY(30deg); | transform: skewY(30deg); | ||
} | } | ||
− | .nav li:hover | + | .nav li:hover #mainmenu:before{ |
-webkit-transform-origin: left top; | -webkit-transform-origin: left top; | ||
-moz-transform-origin: left top; | -moz-transform-origin: left top; | ||
Line 279: | Line 352: | ||
transform: skewY(-30deg); | transform: skewY(-30deg); | ||
} | } | ||
− | .nav li:hover | + | .nav li:hover #mainmenu:after,.nav li:hover #mainmenu:before{ |
− | background-color:rgba( | + | background-color:rgba(250,248,207,0.9); |
} | } | ||
#dropdown-menu a{ | #dropdown-menu a{ | ||
Line 303: | Line 376: | ||
} | } | ||
.nav li:hover #dropdown-menu>li:nth-child(2){ | .nav li:hover #dropdown-menu>li:nth-child(2){ | ||
− | -webkit-transition-delay: | + | -webkit-transition-delay: 100ms; |
− | -moz-transition-delay: | + | -moz-transition-delay: 100ms; |
− | -ms-transition-delay: | + | -ms-transition-delay: 100ms; |
− | -o-transition-delay: | + | -o-transition-delay: 100ms; |
− | transition-delay: | + | transition-delay: 100ms; |
} | } | ||
.nav li:hover #dropdown-menu>li:nth-child(3){ | .nav li:hover #dropdown-menu>li:nth-child(3){ | ||
− | -webkit-transition-delay: | + | -webkit-transition-delay: 200ms; |
− | -moz-transition-delay: | + | -moz-transition-delay: 200ms; |
− | -ms-transition-delay: | + | -ms-transition-delay: 200ms; |
− | -o-transition-delay: | + | -o-transition-delay: 200ms; |
− | transition-delay: | + | transition-delay: 200ms; |
} | } | ||
.nav li:hover #dropdown-menu>li:nth-child(4){ | .nav li:hover #dropdown-menu>li:nth-child(4){ | ||
− | -webkit-transition-delay: | + | -webkit-transition-delay: 300ms; |
− | -moz-transition-delay: | + | -moz-transition-delay: 300ms; |
− | -ms-transition-delay: | + | -ms-transition-delay: 300ms; |
− | -o-transition-delay: | + | -o-transition-delay: 300ms; |
− | transition-delay: | + | transition-delay: 300ms; |
} | } | ||
.nav li:hover #dropdown-menu>li:nth-child(5){ | .nav li:hover #dropdown-menu>li:nth-child(5){ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
-webkit-transition-delay: 400ms; | -webkit-transition-delay: 400ms; | ||
-moz-transition-delay: 400ms; | -moz-transition-delay: 400ms; | ||
Line 337: | Line 403: | ||
transition-delay: 400ms; | transition-delay: 400ms; | ||
} | } | ||
− | .navbar-header{ | + | .nav li:hover #dropdown-menu>li:nth-child(6){ |
+ | -webkit-transition-delay: 500ms; | ||
+ | -moz-transition-delay: 500ms; | ||
+ | -ms-transition-delay: 500ms; | ||
+ | -o-transition-delay: 500ms; | ||
+ | transition-delay: 500ms; | ||
+ | } | ||
+ | .nav li:hover #dropdown-menu>li:nth-child(7){ | ||
+ | -webkit-transition-delay: 600ms; | ||
+ | -moz-transition-delay: 600ms; | ||
+ | -ms-transition-delay: 600ms; | ||
+ | -o-transition-delay: 600ms; | ||
+ | transition-delay: 600ms; | ||
+ | } | ||
+ | #navbar-header{ | ||
float: right; | float: right; | ||
width: 13%; | width: 13%; | ||
− | height: | + | height: 60px; |
− | border-radius: | + | border-radius:20px 0 0 20px; |
− | + | ||
− | background-color:rgba( | + | background-color:rgba(250,248,207,0.7); |
+ | text-align: center; | ||
} | } | ||
− | . | + | .con{ |
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | margin: auto; | ||
text-align: center; | text-align: center; | ||
+ | |||
} | } | ||
− | + | #navbar-header img{ | |
− | position: | + | position: center; |
− | width: | + | height: 50px; |
+ | width: auto; | ||
right: 20px; | right: 20px; | ||
− | margin | + | margin:5px auto; |
− | + | ||
+ | |||
} | } | ||
− | + | #navbar-header span{ | |
− | display: | + | display: inline-block; |
− | position: | + | position:relative; |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | font-size: 2. | + | |
+ | -webkit-transform: translateY(-85%); | ||
+ | -moz-transform: translateY(-85%); | ||
+ | -ms-transform: translateY(-85%); | ||
+ | -o-transform: translateY(-85%); | ||
+ | transform: translateY(-85%); | ||
+ | |||
+ | color: #5e5e5e; | ||
+ | font-size: 2.0vw; | ||
+ | opacity: 0; | ||
+ | |||
} | } | ||
− | + | #navbar-header>a:hover img{ | |
opacity: 0.2; | opacity: 0.2; | ||
} | } | ||
− | + | #navbar-header>a:hover span{ | |
display: block; | display: block; | ||
+ | opacity: 1; | ||
} | } | ||
.nav-container{ | .nav-container{ | ||
Line 397: | Line 496: | ||
height: 5px; | height: 5px; | ||
width: 50px; | width: 50px; | ||
− | background: # | + | background: #17BEBB; |
margin: 10px 5px; | margin: 10px 5px; | ||
} | } | ||
Line 421: | Line 520: | ||
transition: all .7s ease; | transition: all .7s ease; | ||
} | } | ||
− | . | + | .tustanimated { |
z-index: 999; | z-index: 999; | ||
} | } | ||
− | . | + | .tustanimated .arrow-top-r { |
-webkit-transform: rotateZ(-45deg) translateY(11px); | -webkit-transform: rotateZ(-45deg) translateY(11px); | ||
-moz-transform: rotateZ(-45deg) translateY(11px); | -moz-transform: rotateZ(-45deg) translateY(11px); | ||
Line 432: | Line 531: | ||
width: 25px; | width: 25px; | ||
} | } | ||
− | . | + | .tustanimated .arrow-middle-r { |
-webkit-transform: translateX(25px); | -webkit-transform: translateX(25px); | ||
-moz-transform: translateX(25px); | -moz-transform: translateX(25px); | ||
Line 439: | Line 538: | ||
transform: translateX(25px); | transform: translateX(25px); | ||
} | } | ||
− | . | + | .tustanimated .arrow-bottom-r { |
-webkit-transform: rotateZ(45deg) translateY(-11px); | -webkit-transform: rotateZ(45deg) translateY(-11px); | ||
-moz-transform: rotateZ(45deg) translateY(-11px); | -moz-transform: rotateZ(45deg) translateY(-11px); | ||
Line 447: | Line 546: | ||
width: 25px; | width: 25px; | ||
} | } | ||
− | @keyframes | + | |
+ | @keyframes tustanimated { | ||
from { | from { | ||
right: -100%; | right: -100%; | ||
Line 455: | Line 555: | ||
} | } | ||
} | } | ||
− | @-webkit-keyframes | + | @-webkit-keyframes tustshowNav { |
from { | from { | ||
right: -100%; | right: -100%; | ||
Line 463: | Line 563: | ||
} | } | ||
} | } | ||
− | @-moz-keyframes | + | @-moz-keyframes tustshowNav { |
from { | from { | ||
right: -100%; | right: -100%; | ||
Line 471: | Line 571: | ||
} | } | ||
} | } | ||
− | @-o-keyframes | + | @-o-keyframes tustshowNav { |
from { | from { | ||
right: -100%; | right: -100%; | ||
Line 479: | Line 579: | ||
} | } | ||
} | } | ||
− | . | + | .tustshowNav { |
− | -webkit-animation: | + | -webkit-animation: tustshowNav .5s ease forwards; |
− | -moz-animation: | + | -moz-animation: tustshowNav 1s ease forwards; |
− | -o-animation: | + | -o-animation: tustshowNav 1s ease forwards; |
− | animation: | + | animation: tustshowNav .5s ease forwards; |
} | } | ||
− | @keyframes | + | @keyframes tusthideNav { |
from { | from { | ||
right: 0; | right: 0; | ||
Line 493: | Line 593: | ||
} | } | ||
} | } | ||
− | @-webkit-keyframes | + | @-webkit-keyframes tusthideNav { |
from { | from { | ||
right: 0; | right: 0; | ||
Line 501: | Line 601: | ||
} | } | ||
} | } | ||
− | @-moz-keyframes | + | @-moz-keyframes tusthideNav { |
from { | from { | ||
right: 0; | right: 0; | ||
Line 509: | Line 609: | ||
} | } | ||
} | } | ||
− | @-o-keyframes | + | @-o-keyframes tusthideNav { |
from { | from { | ||
right: 0; | right: 0; | ||
Line 517: | Line 617: | ||
} | } | ||
} | } | ||
− | . | + | .tusthideNav { |
− | -webkit-animation: | + | -webkit-animation: tusthideNav 1s ease forwards; |
− | -moz-animation: | + | -moz-animation: tusthideNav 1s ease forwards; |
− | -o-animation: | + | -o-animation: tusthideNav 1s ease forwards; |
− | animation: | + | animation: tusthideNav 1s ease forwards; |
} | } | ||
− | . | + | .tusthidden { |
display: none; | display: none; | ||
} | } | ||
Line 533: | Line 633: | ||
+ | } | ||
+ | a:hover{ | ||
+ | text-decoration:none;!important | ||
} | } |
Latest revision as of 11:23, 15 October 2018
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1538921198356'); /* IE9*/ src: url('iconfont.eot?t=1538921198356#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=1538921198356') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg?t=1538921198356#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
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-team:before { content: "\e6ce"; }
.icon-project:before { content: "\e633"; }
.icon-shujumoxing:before { content: "\e6ef"; }
.icon-arrow-fill-right:before { content: "\e635"; }
.icon-home_my_achievements:before { content: "\e654"; }
.iconfont {
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-team:before { content: "\e6ce"; }
.icon-project:before { content: "\e633"; }
.icon-shujumoxing:before { content: "\e6ef"; }
.icon-home_my_achievements:before { content: "\e654"; }
.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; /*background-color: #17BEBB;*/
}
ul,li{
list-style: none; font-family: Georgia; font-size: 1.1em; padding: 0; margin: 0;
} a{
list-style: none; color: black; text-decoration: none; padding: 0; margin: 0;
} a{
display: block; width: inherit; height: 100%;
} .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(250,248,207,0.7);
}
- mainmenu{
display: block; position: relative; float: right; width: 100%;
height: 60px; text-align: center;
background-color:rgba(250,248,207,0.7); -webkit-transition: all .1s; -moz-transition: all .15s; -ms-transition: all .15s; -o-transition: all .15s; transition: all .15s;
}
- mainmenu span{
font-size: 1.0vw; color: #5e5e5e;
line-height:0px; }
- mainmenu i{
display: block; margin-top:15px; height: 8px; font-size: 1.7vw; color: #5e5e5e;
}
- mainmenu:hover i{
color: #17BEBB;
}
- mainmenu:hover span{
color: #17BEBB;
}
- dropdown-menu>li:hover{
background-color:rgba(250,248,207,1);
}
- dropdown-menu{
position: relative; height: auto; text-align: center; padding: 0px; top:12px; width: 100%;
-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: auto; padding: 10px 0px; margin: 0px; font-size: 1.0vw; right: 30px;
background-color:rgba(250,248,207,0.7); opacity: 0;
-webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: transform 0.5s ease-in,opacity 0.1s; -moz-transition: transform 0.5s ease-in,opacity 0.1s; -ms-transition: transform 0.5 ease-in,opacity 0.1s; -o-transition: transform 0.5s ease-in,opacity 0.1s; transition: transform 0.5s ease-in,opacity 0.1s;
}
- dropdown-menu a {
color: #5e5e5e;
}
- mainmenu span{
font-size: 0.8vw;
}
- mainmenu::after,#mainmenu::before{
content:""; display: block; position: absolute; top: 0; width: 15px; height: 100%; background-color:rgba(250,248,207,0.7);
}
- mainmenu::after{
right: 100%;
}
- mainmenu::before{
left: 100%;
} .second-nav{
display: block; color: #5e5e5e; height: 30px; width: 100%;
} .second-nav li:hover{
background-color:rgba(250,248,207,1); color: #000;
} .second-nav li{
display: none; position: relative; width: 100%; height: auto; left: 100%; margin: 0px; padding: 15px 0px; font-size: 0.9vw;
background-color:rgba(250,248,207,0.7); -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px);
opacity: 0; -webkit-transition: opacity .5s ease-in; -moz-transition: opacity .5s ease-in; -ms-transition: opacity .5s ease-in; -o-transition: opacity .5s ease-in; transition: opacity .5s ease-in;
} /*.second-nav:active li{*/
/*display: block;*/ /*opacity: 1;*/
/*}*/
- Design:hover li{
display: block; opacity: 1;
}
- parts:hover li{
display: block; opacity: 1;
}
- Experiments:hover li{
display: block; opacity: 1;
}
- notebook:hover li{
display: block; opacity: 1;
} .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 span,#mainmenu i {*/ /*color:rgba(51,153,204,0.8);*/ /*}*/ .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(250,248,207,0.9);
}
- 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: 100ms; -moz-transition-delay: 100ms; -ms-transition-delay: 100ms; -o-transition-delay: 100ms; transition-delay: 100ms;
} .nav li:hover #dropdown-menu>li:nth-child(3){
-webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms;
} .nav li:hover #dropdown-menu>li:nth-child(4){
-webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms;
} .nav li:hover #dropdown-menu>li:nth-child(5){
-webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms;
} .nav li:hover #dropdown-menu>li:nth-child(6){
-webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms;
} .nav li:hover #dropdown-menu>li:nth-child(7){
-webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; -ms-transition-delay: 600ms; -o-transition-delay: 600ms; transition-delay: 600ms;
}
- navbar-header{
float: right; width: 13%; height: 60px; border-radius:20px 0 0 20px;
background-color:rgba(250,248,207,0.7); text-align: center;
} .con{
display: block; width: 100%; height: 100%; margin: auto; text-align: center;
}
- navbar-header img{
position: center; height: 50px; width: auto; right: 20px; margin:5px auto;
}
- navbar-header span{
display: inline-block; position:relative; width: 100%; height: 100%;
-webkit-transform: translateY(-85%); -moz-transform: translateY(-85%); -ms-transform: translateY(-85%); -o-transform: translateY(-85%); transform: translateY(-85%);
color: #5e5e5e; font-size: 2.0vw; opacity: 0;
}
- navbar-header>a:hover img{
opacity: 0.2;
}
- navbar-header>a:hover span{
display: block; opacity: 1;
} .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: #17BEBB; 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;
} .tustanimated {
z-index: 999;
} .tustanimated .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;
} .tustanimated .arrow-middle-r {
-webkit-transform: translateX(25px); -moz-transform: translateX(25px); -ms-transform: translateX(25px); -o-transform: translateX(25px); transform: translateX(25px);
} .tustanimated .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 tustanimated {
from { right: -100%; } to { right: 0; }
} @-webkit-keyframes tustshowNav {
from { right: -100%; } to { right: 0; }
} @-moz-keyframes tustshowNav {
from { right: -100%; } to { right: 0; }
} @-o-keyframes tustshowNav {
from { right: -100%; } to { right: 0; }
} .tustshowNav {
-webkit-animation: tustshowNav .5s ease forwards; -moz-animation: tustshowNav 1s ease forwards; -o-animation: tustshowNav 1s ease forwards; animation: tustshowNav .5s ease forwards;
} @keyframes tusthideNav {
from { right: 0; } to { right: -100%; }
} @-webkit-keyframes tusthideNav {
from { right: 0; } to { right: -100%; }
} @-moz-keyframes tusthideNav {
from { right: 0; } to { right: -100%; }
} @-o-keyframes tusthideNav {
from { right: 0; } to { right: -100%; }
} .tusthideNav {
-webkit-animation: tusthideNav 1s ease forwards; -moz-animation: tusthideNav 1s ease forwards; -o-animation: tusthideNav 1s ease forwards; animation: tusthideNav 1s ease forwards;
} .tusthidden {
display: none;
} .block{
display: block;
} .nav-main {
position: relative;
}
a:hover{
text-decoration:none;!important
}