Team:SYSU-Software/overview.css

From 2014.igem.org

(Difference between revisions)

Revision as of 14:33, 13 October 2014

@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);
 }

}

@@ Line 19: / Line 19: @@
 	width: 100%;
 	height: 100%;
-	background-image: url(images/bgLight.png);
+	background-image: url(https://static.igem.org/mediawiki/2014/thumb/7/74/Overview-BgLight.png/800px-Overview-BgLight.png);
 	background-position: bottom center;
 	background-repeat: no-repeat;
@@ Line 77: / Line 77: @@
 	width: 40px;
 	height: 63px;
-	background-image: url(images/roll.png);
+	background-image: url(https://static.igem.org/mediawiki/2014/2/2f/Overview-roll.png);
 	-webkit-animation: float 2s infinite alternate;
 }