|
|
| Line 83: |
Line 83: |
| | } | | } |
| | </style> | | </style> |
| − | <style type="text/css">
| |
| − | li{ list-style:none;}
| |
| − | #Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;}
| |
| − | #lay-menu{ position:fixed; right:0; top:50%; z-index:20;}
| |
| − | #lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px black solid; cursor:pointer;}
| |
| − | #lay-menu li.active{ background:black; cursor:default;}
| |
| − | #home{ background:url(https://static.igem.org/mediawiki/2017/3/38/Team-NUDT_CHINAimage1.jpg); overflow-x: hidden; top: 0px;height: 100%;width: 100%;}
| |
| − | #abstract{ background:url(https://static.igem.org/mediawiki/2017/3/38/Team-NUDT_CHINAimage1.jpg); overflow-x: hidden; top: 0px;height: 100%;width: 100%;}
| |
| − | #Team{ background:url(https://static.igem.org/mediawiki/2017/3/38/Team-NUDT_CHINAimage1.jpg); overflow-x: hidden; top: 0px;height: 100%;width: 100%;}
| |
| − | #homeContent .homeContent1{ width:100%; height:100%; position:relative; perspective:800px; transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; transition:1s;}
| |
| − | #homeContent .homeContent1 li{ width:100%; height:100%; position:absolute; left:0; top:0; background:black; visibility:hidden;}
| |
| − | #homeContent .homeContent1 li:nth-of-type(1){background:#dc6c5f;}
| |
| − | #homeContent .homeContent1 li:nth-of-type(2){background:#95dc84;}
| |
| − | #homeContent .homeContent1 li:nth-of-type(3){background:#64b9d2;}
| |
| − | #homeContent .homeContent1 li h1{ color:white; text-align:center; padding-top:200px;}
| |
| − | #homeContent .homeContent1 li.active{ z-index:1; visibility:visible;}
| |
| − | #homeContent h1{border-bottom: none;}
| |
| − | #homeContent .homeContent2{ position:absolute; bottom:0; z-index:2; text-align:center; width:100%; transition:1s;}
| |
| − | #homeContent .homeContent2 li{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.5); display:inline-block; margin:2px; box-shadow:0 0 4px rgba(25,25,25,0.8); cursor:pointer;}
| |
| − | #homeContent .homeContent2 li.active{ background:white; cursor:default;}
| |
| | | | |
| − | #homeContent .homeContent1 .leftShow{ animation:1s homeLeftShow; visibility:visible; z-index:3;-webkit-animation:1s homeLeftShow;}
| |
| − | #homeContent .homeContent1 .rightHide{ animation:1s homeRightHide; visibility:hidden; -webkit-animation:1s homeRightHide;}
| |
| − |
| |
| − |
| |
| − | #homeContent .homeContent1 .leftHide{ animation:1s homeLeftHide; visibility:hidden; -webkit-animation:1s homeLeftHide;}
| |
| − | #homeContent .homeContent1 .rightShow{ animation:1s homeRightShow; visibility:visible; z-index:3; -webkit-animation:1s homeRightShow;}
| |
| − | </style>
| |
| − | <style type="text/css">
| |
| − | @keyframes homeLeftHide{
| |
| − | 0%{ transform:translateZ(0px); visibility:visible;}
| |
| − | 40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
| |
| − | 100%{ transform:translateZ(-200px);}
| |
| − | }
| |
| − | @keyframes homeRightShow{
| |
| − | 0%{ transform:translateZ(-200px);}
| |
| − | 40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
| |
| − | 100%{ transform:translateZ(0px);}
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes homeLeftHide{
| |
| − | 0%{ -webkit-transform:translateZ(0px); visibility:visible;}
| |
| − | 40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
| |
| − | 100%{ -webkit-transform:translateZ(-200px);}
| |
| − | }
| |
| − | @-webkit-keyframes homeRightShow{
| |
| − | 0%{ -webkit-transform:translateZ(-200px);}
| |
| − | 40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
| |
| − | 100%{ -webkit-transform:translateZ(0px);}
| |
| − | }
| |
| − |
| |
| − | @keyframes homeLeftShow{
| |
| − | 0%{ transform:translateZ(-200px);}
| |
| − | 40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
| |
| − | 100%{ transform:translateZ(0px);}
| |
| − | }
| |
| − | @keyframes homeRightHide{
| |
| − | 0%{ transform:translateZ(0px); visibility:visible;}
| |
| − | 40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
| |
| − | 100%{ transform:translateZ(-200px);}
| |
| − | }
| |
| − | @-webkit-keyframes homeLeftShow{
| |
| − | 0%{ -webkit-transform:translateZ(-200px);}
| |
| − | 40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
| |
| − | 100%{ -webkit-transform:translateZ(0px);}
| |
| − | }
| |
| − | @-webkit-keyframes homeRightHide{
| |
| − | 0%{ -webkit-transform:translateZ(0px); visibility:visible;}
| |
| − | 40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
| |
| − | 100%{ -webkit-transform:translateZ(-200px);}
| |
| − | }
| |
| − | /* home end */
| |
| − | </style>
| |
| − |
| |
| − | <style type="text/css">
| |
| − |
| |
| − | .Myheader{border-bottom: none;}
| |
| − | #loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;text-align: center;}
| |
| − | #loading div:nth-of-type(1){ top:0;}
| |
| − | #loading div:nth-of-type(2){ bottom:0;}
| |
| − | #loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
| |
| − |
| |
| − | body {
| |
| − | color: #777;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 88em) {
| |
| − | .Myheader,
| |
| − | .content {
| |
| − | padding-left: 2em;
| |
| − | padding-right: 2em;
| |
| − | }
| |
| − | #layout {
| |
| − | padding-left: 240px; /* left col width "#menu" */
| |
| − | left: 0;
| |
| − | }
| |
| − | #menu {
| |
| − | left: 240px;
| |
| − | }
| |
| − | .menu-link {
| |
| − | position: fixed;
| |
| − | left: 240px;
| |
| − | display: none;
| |
| − | }
| |
| − | #layout.active .menu-link {
| |
| − | left: 240px;
| |
| − | }
| |
| − | #Qidilist .liList{ width:2050px; position:relative; left:50%; margin-left:-750px; overflow:hidden;text-align: center;}
| |
| − | #Qidilist .divList{ width:1200px; height:520px; margin:0px auto; position:relative;}
| |
| − | .myheader{width: 1000px;}
| |
| − | .Myheader{margin-top:4em;}
| |
| − | }
| |
| − |
| |
| − | @media (max-width: 88em) {
| |
| − | #layout.active {
| |
| − | position: relative;
| |
| − | left: 240px;
| |
| − | }
| |
| − | #Qidilist .liList{ width:1800px; position:relative; left:50%; margin-left:-750px; overflow:hidden;text-align: center;}
| |
| − | #Qidilist .divList{ width:1050px; height:500px; margin:0px auto; position:relative;}
| |
| − | .myheader{width:800px;}
| |
| − | .Myheader{margin-top:1em;}
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| | | | |
| | </head> | | </head> |
