"
Team:SYSU-Software/overview.css
From 2014.igem.org
@charset "UTF-8"; /**
* * @authors 晚茗 (huangm.ss.sysu@gmail.com) * @date 2014-10-06 21:14:23 * @version $1.0$ */
- {
margin: 0; padding: 0; }
- globalWrapper{
height: 100%; }
- content{
height: 100%; }
- bodyContent{
width: 100%; height: 100%; overflow: hidden; position: relative; } html{ width: 100%; height: 100%; overflow: hidden; } body{ width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#1B0634), color-stop(#2D4292), to(#3494D8)); background: -webkit-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -moz-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -ms-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: linear-gradient(top,#1B0634,#2D4292,#3494D8); }
- menubar>ul>li:nth-child(7),#menubar>ul>li:nth-child(5),#menubar>ul>li:nth-child(6){
color: transparent !important; }
- bodyContent{
background: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(#1B0634), color-stop(#2D4292), to(#3494D8)); background: -webkit-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -moz-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -ms-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: linear-gradient(top,#1B0634,#2D4292,#3494D8); }
- bodyContent.hm-part1, body.hm-part1{
background: -webkit-gradient(linear, left top, left bottom, from(#1B0634), color-stop(#2D4292), to(#3494D8)); background: -webkit-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -moz-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -ms-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: linear-gradient(top,#1B0634,#2D4292,#3494D8);
}
- bodyContent.hm-part2, body.hm-part2{
background: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(#1a0a30), to(#40b63c)); background: -webkit-linear-gradient(top, #1a0a30, #40b63c); background: -moz-linear-gradient(top, #1a0a30, #40b63c); background: -ms-linear-gradient(top, #1a0a30, #40b63c); background: linear-gradient(top,#1a0a30,#40b63c); }
- bodyContent.hm-part3, body.hm-part3{
background: -webkit-gradient(linear, left top, left bottom, from(#150348), to(#d04c59)); background: -webkit-linear-gradient(top, #150348, #d04c59); background: -moz-linear-gradient(top, #150348, #d04c59); background: -ms-linear-gradient(top, #150348, #d04c59); background: linear-gradient(top,#150348,#d04c59); }
- bodyContent.hm-part4, body.hm-part4{
background: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(#2b1340), to(#42bdbd)); background: -webkit-linear-gradient(top, #2b1340, #42bdbd); background: -moz-linear-gradient(top, #2b1340, #42bdbd); background: -ms-linear-gradient(top, #2b1340, #42bdbd); background: linear-gradient(top,#2b1340,#42bdbd); } .hm-part{ visibility: hidden; -webkit-perspective: 1px; -moz-perspective: 1px; perspective: 1px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .hm-part1 .hm-light, .hm-part1 .scrollPosition{ visibility: visible; } .hm-part1 #hm-part1 ,.hm-part3 #hm-part3{ visibility: visible; -webkit-perspective: 2000px; -moz-perspective: 2000px; perspective: 2000px; -webkit-transition: -webkit-perspective 2s ease-in; -moz-transition: -moz-perspective 2s ease-in; transition: perspective 2s ease-in; } .hm-part2 #hm-part2{ -webkit-perspective: 10000px; -moz-perspective: 10000px; perspective: 10000px; visibility: visible; -webkit-perspective-origin: 39% 50%; -moz-perspective-origin: 39% 50%; perspective-origin: 39% 50%;
-webkit-transition: -webkit-perspective 2s ease-in;
-moz-transition: -moz-perspective 2s ease-in;
transition: perspective 2s ease-in;
}
.hm-part4 #hm-part4{
visibility: visible;
-webkit-perspective-origin: 56% 81%;
-moz-perspective-origin: 56% 81%;
perspective-origin: 56% 81%;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-transition: -webkit-perspective 2s ease-in;
-moz-transition: -moz-perspective 2s ease-in;
transition: perspective 2s ease-in;
}
.hm-light{
width: 912px;
height: 390px;
position: fixed;
bottom: 0px;
left: 50%;
visibility: hidden;
background-image: url(
);
-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
} .screenCenter{ width: 912px; height: 500px; position: absolute; top: 45%; left: 50%;
-webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.hm-part1-header{ text-align: center; -webkit-transform: translateZ(10px); -moz-transform: translateZ(10px); transform: translateZ(10px); }
- showpics{
margin-top: -80px; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .hm-part1 .rotate#showpics{ -webkit-animation: rotate 20s linear 1.5s infinite; -moz-animation: rotate 20s linear 1.5s infinite; animation: rotate 20s linear 1.5s infinite; } .showpic{ position: absolute; top: 0; left: 0; }
- showparts{
-webkit-transform: translateZ(10px); -moz-transform: translateZ(10px); transform: translateZ(10px); }
- showdna{
left: -150px; top: 120px; -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); transform: translateZ(100px); }
- showvector{
left: 150px; top: 140px; -webkit-transform: translateZ(150px); -moz-transform: translateZ(150px); transform: translateZ(150px);
}
.scrollPosition{
position: fixed;
visibility: hidden;
left: 50%;
bottom: 15px;
-webkit-transform: translate(0,0) translateX(-50%);
-moz-transform: translate(0,0) translateX(-50%);
-ms-transform: translate(0,0) translateX(-50%);
transform: translate(0,0) translateX(-50%);
}
.scrolltip{
width: 40px;
height: 63px;
background-image: url(
);
-webkit-animation: float 2s infinite alternate;
-moz-animation: float 2s infinite alternate;
animation: float 2s infinite alternate;
}
.hm-line{
width: 2500px;
height: 3px;
margin-top: 250px;
margin-left: -794px;
background-color: #9ff70f;
}
.hm-line-star img{
margin-top: -66px;
margin-left: -564px;
}
.hm-part2 .hm-line-star img{
-webkit-animation: line-star 1s .5s;
-moz-animation: line-star 1s .5s;
animation: line-star 1s .5s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.hm-doors-perspective{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: scale(.7);
-moz-transform: scale(.7);
-ms-transform: scale(.7);
transform: scale(.7);
margin-top: -200px;
}
.hm-doors{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
-webkit-animation: doors 10s linear infinite;
-moz-animation: doors 10s linear infinite;
animation: doors 10s linear infinite;
}
.hm-door{
width: 424px;
height: 424px;
}
.hm-door.and{
background-image: url(
);
-webkit-transform: translateZ(212px);
-moz-transform: translateZ(212px);
-ms-transform: translateZ(212px);
transform: translateZ(212px);
}
.hm-door.or{
position: absolute;
top: 211px;
background-image: url(
);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.hm-door.nand{
position: absolute;
top: -211px;
background-image: url(
);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.hm-door.nor{
background-image: url(
);
position: absolute;
top: 0px;
-webkit-transform: translateZ(-212px) rotateX(180deg);
-moz-transform: translateZ(-212px) rotateX(180deg);
-ms-transform: translateZ(-212px) rotateX(180deg);
transform: translateZ(-212px) rotateX(180deg);
}
.hm-door.empty{
background-image: url(
);
position: absolute;
top: 0px;
left: 211px;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
backface-visibility: visible;
}
.hm-part2-circle{
width: 850px;
height: 850px;
background-image: url(
);
position: absolute;
top: -180px;
left: 150px;
-webkit-animation: circle 2.5s linear infinite;
-moz-animation: circle 2.5s linear infinite;
animation: circle 2.5s linear infinite;
}
.hm-part2-header{
position: absolute;
top: 164px;
left: 550px;
-webkit-transform: translateZ(400px);
-moz-transform: translateZ(400px);
transform: translateZ(400px);
}
.hm-part3-axis{
width: 1px;
height: 1px;
position: absolute;
bottom: -60px;
left: 200px;
-webkit-transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s;
transition: width 2s, height 2s;
overflow: hidden;
}
.hm-part3 .hm-part3-axis{
width: 888px;
height: 585px;
}
.hm-part3-axis img{
position: absolute;
bottom: 0px;
left: 0px;
}
.hm-part3-header{
position: absolute;
left: -152px;
top: 270px;
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
transform: translateZ(50px);
}
.hm-part3-line{
position: absolute;
top: 10px;
left: 270px;
opacity: 0;
} .hm-part3 .hm-part3-line{ opacity: 1; -webkit-transition: opacity 2s 2s; -moz-transition: opacity 2s 2s; transition: opacity 2s 2s; } .hm-part3-ball{ position: absolute; left: 249px; top: 470px; } .hm-part3 .hm-part3-ball{ -webkit-animation: ball-y 2.5s 3s linear infinite; -moz-animation: ball-y 2.5s 3s linear infinite; animation: ball-y 2.5s 3s linear infinite; } .hm-part3 .hm-part3-ball img{ -webkit-animation: ball-x 2.5s 3s linear infinite; -moz-animation: ball-x 2.5s 3s linear infinite; animation: ball-x 2.5s 3s linear infinite; } .hm-part3-fx{ position: absolute; left: 450px; top: 150px; }
- hm-part3-fx-25{
position: absolute; left: 120px; top: -30px; left: 122px; top: -24px; -webkit-transform-origin:-6% 66%; -moz-transform-origin:-6% 66%; -ms-transform-origin:-6% 66%; transform-origin:-6% 66%; -webkit-animation: uncircle 2s 1s linear infinite; -moz-animation: uncircle 2s 1s linear infinite; animation: uncircle 2s 1s linear infinite; }
- hm-part4 > div{
position: absolute; } .hm-part4-require{ top: -20px; left: 0px; -webkit-transform: translateZ(2px); -moz-transform: translateZ(2px); transform: translateZ(2px); } .hm-part4-doc{ top: 310px; left: -97px; -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); transform: translateZ(20px); } .hm-part4-proj{ top: 74px; left: 133px; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); transform: translateZ(50px); } .hm-part4-policy{ top: 370px; left: 517px; -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); transform: translateZ(20px); } .hm-part4-team{ top: 330px; left: 709px; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); transform: translateZ(50px); } .hm-part4-header{ -webkit-animation: h-switch 1.5s infinite ease-in-out alternate; -moz-animation: h-switch 1.5s infinite ease-in-out alternate; animation: h-switch 1.5s infinite ease-in-out alternate; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); transform: translateZ(50px); width: 351px; height:110px; top: 213px;
left: 515px;
} .hm-part4-header img{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; }
- hm-part4-header2{
-webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); } .hm-part4-download{ left: 445px; top:10px; -webkit-transform: translateZ(70px); -moz-transform: translateZ(70px); transform: translateZ(70px); } @-webkit-keyframes h-switch{ from{ -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } to { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } }@-moz-keyframes h-switch{ from{ -moz-transform: rotateX(0deg); transform: rotateX(0deg); } to { -moz-transform: rotateX(180deg); transform: rotateX(180deg); } }@keyframes h-switch{ from{ -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); } to { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); } } @-webkit-keyframes ball-x{ from{ -webkit-transform: translateX(0); transform: translateX(0); } to{ -webkit-transform: translateX(700px); transform: translateX(700px); } }@-moz-keyframes ball-x{ from{ -moz-transform: translateX(0); transform: translateX(0); } to{ -moz-transform: translateX(700px); transform: translateX(700px); } }@keyframes ball-x{ from{ -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } to{ -webkit-transform: translateX(700px); -moz-transform: translateX(700px); transform: translateX(700px); } } @-webkit-keyframes ball-y{ 0%{ -webkit-transform: translateY(0); transform: translateY(0); } 5%{ -webkit-transform: translateY(-110px); transform: translateY(-110px); } 10%{ -webkit-transform: translateY(-200px); transform: translateY(-200px); } 20%{ -webkit-transform: translateY(-300px); transform: translateY(-300px); } 30%{ -webkit-transform: translateY(-360px); transform: translateY(-360px); } 40%{ -webkit-transform: translateY(-400px); transform: translateY(-400px); } 50%{ -webkit-transform: translateY(-435px); transform: translateY(-435px); } 70%{ -webkit-transform: translateY(-470px); transform: translateY(-470px); } 90%{ -webkit-transform: translateY(-489px); transform: translateY(-489px); } 100%{ -webkit-transform: translateY(-480px); transform: translateY(-480px); } } @-moz-keyframes ball-y{ 0%{ -moz-transform: translateY(0); transform: translateY(0); } 5%{ -moz-transform: translateY(-110px); transform: translateY(-110px); } 10%{ -moz-transform: translateY(-200px); transform: translateY(-200px); } 20%{ -moz-transform: translateY(-300px); transform: translateY(-300px); } 30%{ -moz-transform: translateY(-360px); transform: translateY(-360px); } 40%{ -moz-transform: translateY(-400px); transform: translateY(-400px); } 50%{ -moz-transform: translateY(-435px); transform: translateY(-435px); } 70%{ -moz-transform: translateY(-470px); transform: translateY(-470px); } 90%{ -moz-transform: translateY(-489px); transform: translateY(-489px); } 100%{ -moz-transform: translateY(-480px); transform: translateY(-480px); } } @keyframes ball-y{ 0%{ -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 5%{ -webkit-transform: translateY(-110px); -moz-transform: translateY(-110px); transform: translateY(-110px); } 10%{ -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); transform: translateY(-200px); } 20%{ -webkit-transform: translateY(-300px); -moz-transform: translateY(-300px); transform: translateY(-300px); } 30%{ -webkit-transform: translateY(-360px); -moz-transform: translateY(-360px); transform: translateY(-360px); } 40%{ -webkit-transform: translateY(-400px); -moz-transform: translateY(-400px); transform: translateY(-400px); } 50%{ -webkit-transform: translateY(-435px); -moz-transform: translateY(-435px); transform: translateY(-435px); } 70%{ -webkit-transform: translateY(-470px); -moz-transform: translateY(-470px); transform: translateY(-470px); } 90%{ -webkit-transform: translateY(-489px); -moz-transform: translateY(-489px); transform: translateY(-489px); } 100%{ -webkit-transform: translateY(-480px); -moz-transform: translateY(-480px); transform: translateY(-480px); } } @-webkit-keyframes circle{ from{ -webkit-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -webkit-transform: rotateY(0deg) rotateZ(360deg); transform: rotateY(0deg) rotateZ(360deg); } } @-moz-keyframes circle{ from{ -moz-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -moz-transform: rotateY(0deg) rotateZ(360deg); transform: rotateY(0deg) rotateZ(360deg); } } @keyframes circle{ from{ -webkit-transform: rotateY(0deg) rotateZ(0deg); -moz-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -webkit-transform: rotateY(0deg) rotateZ(360deg); -moz-transform: rotateY(0deg) rotateZ(360deg); transform: rotateY(0deg) rotateZ(360deg); } } @-webkit-keyframes uncircle{ from{ -webkit-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -webkit-transform: rotateY(0deg) rotateZ(-360deg); transform: rotateY(0deg) rotateZ(-360deg); } } @-moz-keyframes uncircle{ from{ -moz-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -moz-transform: rotateY(0deg) rotateZ(-360deg); transform: rotateY(0deg) rotateZ(-360deg); } } @keyframes uncircle{ from{ -webkit-transform: rotateY(0deg) rotateZ(0deg); -moz-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -webkit-transform: rotateY(0deg) rotateZ(-360deg); -moz-transform: rotateY(0deg) rotateZ(-360deg); transform: rotateY(0deg) rotateZ(-360deg); } }
@-webkit-keyframes doors{ from{ -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } to { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } }
@-moz-keyframes doors{ from{ -moz-transform: rotateX(0deg); transform: rotateX(0deg); } to { -moz-transform: rotateX(360deg); transform: rotateX(360deg); } }
@keyframes doors{ from{ -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); } to { -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); transform: rotateX(360deg); } } @-webkit-keyframes line-star{ from{ -webkit-transform: translateX(0px); transform: translateX(0px); } to{ -webkit-transform: translateX(884px); transform: translateX(884px); } } @-moz-keyframes line-star{ from{ -moz-transform: translateX(0px); transform: translateX(0px); } to{ -moz-transform: translateX(884px); transform: translateX(884px); } } @keyframes line-star{ from{ -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); } to{ -webkit-transform: translateX(884px); -moz-transform: translateX(884px); transform: translateX(884px); } } @-webkit-keyframes rotate{ from{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to{ -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-moz-keyframes rotate{ from{ -moz-transform: rotateY(0deg); transform: rotateY(0deg); } to{ -moz-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes rotate{ from{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); } to{ -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes float{ 0% {
-webkit-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
50% {
-webkit-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
100% {
-webkit-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
} @-moz-keyframes float{ 0% {
-moz-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
50% {
-moz-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
100% {
-moz-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
} @keyframes float{ 0% {
-webkit-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-moz-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
50% {
-webkit-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-moz-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
100% {
-webkit-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-moz-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
} @-webkit-keyframes eyeball{
0%{left: 9px;}
100%{left: 1px;}
} @-moz-keyframes eyeball{
0%{left: 9px;}
100%{left: 1px;}
} @keyframes eyeball{
0%{left: 9px;}
100%{left: 1px;}
} .hm-sequence{ position: fixed; right: 3%; top: 40%; } .hm-sequence div{ width: 14px; height: 14px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background-color: white; opacity: .2; cursor: pointer; } .hm-sequence div + div{ margin-top: 18px; } .hm-part1 #hm-sequence1 , .hm-part2 #hm-sequence2 , .hm-part3 #hm-sequence3 , .hm-part4 #hm-sequence4{ opacity: .9; } .hm-skip{ color: white; font-size: 26px; position: fixed; bottom: 20px; right: 50px; cursor: pointer; } .igemlogo { position: fixed; top: 20px; right: 20px; } .hm-part4 .hm-skip{ display: none; } .css3-icon{ height:20px; width:20px; display:block; position:relative; display: inline; } .down-triangle{ height:10px; } .down-triangle:before{ content:; height:0; width:0; display:block; border:10px transparent solid; border-bottom-width:0; border-top-color:#fff; position:absolute; top:10px; left:7px; } .eye { display: inline-block; width: 20px; height: 20px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: 30px 0px 0px 0px rgba(255, 255, 255, 0.8); position: relative; margin: 0px 10px; } .eye:after { background-color: #333; width: 10px; height: 10px; box-shadow: 30px 0px 0px 0px #333; border-radius: 50%; left: 9px; top: 8px; position: absolute; content: ""; -webkit-animation: eyeball 2s linear infinite alternate; -moz-animation: eyeball 2s linear infinite alternate; animation: eyeball 2s linear infinite alternate; } .spinner {
margin: 200px auto 0; width: 70px; text-align: center;
}
.spinner > div {
width: 18px; height: 18px; background-color: #FFF; opacity: .6; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out both; animation: bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s; animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s; animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
