"
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;
}
html{
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);
overflow: hidden;
}
body{
width: 100%;
height: 100%;
background-image: url(
);
background-position: bottom center;
background-repeat: no-repeat;
}
.screenCenter{
width: 912px;
height: 500px;
margin: auto;
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%); }
h1{ text-align: center; }
- showpics{
margin-top: -80px; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .rotate{ -webkit-animation: rotate 20s linear 0s infinite; } .showpic{ position: absolute; top: 0; left: 0; }
- showparts{
-webkit-transform: translateZ(0px); }
- showdna{
left: -150px; top: 120px; -webkit-transform: translateZ(100px); }
- showvector{
left: 150px; top: 140px; -webkit-transform: translateZ(150px);
}
.scrollPosition{
position: absolute;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
}
.scrolltip{
width: 40px;
height: 63px;
background-image: url(
);
-webkit-animation: float 2s infinite alternate;
}
@-webkit-keyframes rotate{
from{
-webkit-transform: rotateY(0deg);
}
to{
-webkit-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);
-moz-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-ms-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);
-ms-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);
-ms-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);
}
}
