Team:BIT-China/css/all.css

From 2014.igem.org

Revision as of 14:24, 15 August 2014 by Bitlichun (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

@charset "utf-8"; /* CSS Document */ body{ background:url(../img/bg.jpg); margin:0px; padding:0px; width:100%; background-repeat:repeat; }

  1. lay{

position:absolute; top:0px; left:0px; width:1366px; height:176px; background-image:url(../img/snow.png); border:0px #FFF solid; } .header{ width:1366px; height:176px; background:url(../img/head.jpg); } .logo{ border:0px #000000 solid; width:140px; height:150px; padding-left:40px; padding-top:20px; } .nav_title{ border-left:#CCC solid 1px; padding-left:40px; width:180px; height:120px; position:absolute; left:200px; top:20px; font-family:Verdana, Geneva, sans-serif; font-size:50px; line-height:120px; font-weight:bold; color:rgba(255,255,255,0.9); text-shadow:0px 0px 5px rgba(0,0,0,1); } .logo_img{ position:absolute; z-index:99999; }

  1. bird{

animation: mybird 40s linear 0s infinite; -webkit-animation:mybird 40s linear 0s infinite; -moz-animation: mybird 40s linear 0s infinite } @-webkit-keyframes mybird{ 0% {left:50px;top:22px;-webkit-transform:rotate(0deg) scale(1,1);} 3%{left:70px;top:-25px;-webkit-transform:rotate(70deg) scale(0.8,0.6);} 8%{left:200px;top:10px;-webkit-transform:rotate(90deg) scale(0.7,0.7);} 15%{left:400px;top:20px;-webkit-transform:rotate(100deg) scale(0.8,0.6);} 20%{left:600px;top:3px;-webkit-transform:rotate(70deg) scale(0.7,0.7);} 30%{left:780px;top:-10px;-webkit-transform:rotate(60deg) scale(0.8,0.6);} 50%{left:1400px;top:10px;-webkit-transform:rotate(80deg) scale(0.7,0.8);} 54%{left:1300px;top:60px;-webkit-transform:rotate(230deg) scale(0.7,0.6);} 60%{left:1100px;top:20px;-webkit-transform:rotate(300deg) scale(0.8,0.8);} 70%{left:800px;top:50px;-webkit-transform:rotate(280deg) scale(0.7,0.7);} 85%{left:400px;top:80px;-webkit-transform:rotate(270deg) scale(0.8,0.6);} 95%{left:90px;top:40px;-webkit-transform:rotate(320deg) scale(0.8,0.7);} 98%{left:50px;top:22px;-webkit-transform:rotate(360deg) scale(1,1);} 100%{left:50px;top:22px;-webkit-transform:rotate(360deg) scale(1,1);} } @-ms-keyframes mybird{ 0% {left:50px;top:22px;-ms-transform:rotate(0deg) scale(1,1);} 3%{left:70px;top:-25px;-ms-transform:rotate(70deg) scale(0.8,0.6);} 8%{left:200px;top:10px;-ms-transform:rotate(90deg) scale(0.7,0.7);} 15%{left:400px;top:20px;-ms-transform:rotate(100deg) scale(0.8,0.6);} 20%{left:600px;top:3px;-ms-transform:rotate(70deg) scale(0.7,0.7);} 30%{left:780px;top:-10px;-ms-transform:rotate(60deg) scale(0.8,0.6);} 50%{left:1400px;top:10px;-ms-transform:rotate(80deg) scale(0.7,0.8);} 54%{left:1300px;top:60px;-ms-transform:rotate(230deg) scale(0.7,0.6);} 60%{left:1100px;top:20px;-ms-transform:rotate(300deg) scale(0.8,0.8);} 70%{left:800px;top:50px;-ms-transform:rotate(280deg) scale(0.7,0.7);} 85%{left:400px;top:80px;-ms-transform:rotate(270deg) scale(0.8,0.6);} 95%{left:90px;top:40px;-ms-transform:rotate(320deg) scale(0.8,0.7);} 98%{left:50px;top:22px;-ms-transform:rotate(360deg) scale(1,1);} 100%{left:50px;top:22px;-ms-transform:rotate(360deg) scale(1,1);} } @-o-keyframes mybird{ 0% {left:50px;top:22px;-o-transform:rotate(0deg) scale(1,1);} 3%{left:70px;top:-25px;-o-transform:rotate(70deg) scale(0.8,0.6);} 8%{left:200px;top:10px;-o-transform:rotate(90deg) scale(0.7,0.7);} 15%{left:400px;top:20px;-o-transform:rotate(100deg) scale(0.8,0.6);} 20%{left:600px;top:3px;-o-transform:rotate(70deg) scale(0.7,0.7);} 30%{left:780px;top:-10px;-o-transform:rotate(60deg) scale(0.8,0.6);} 50%{left:1400px;top:10px;-o-transform:rotate(80deg) scale(0.7,0.8);} 54%{left:1300px;top:60px;-o-transform:rotate(230deg) scale(0.7,0.6);} 60%{left:1100px;top:20px;-o-transform:rotate(300deg) scale(0.8,0.8);} 70%{left:800px;top:50px;-o-transform:rotate(280deg) scale(0.7,0.7);} 85%{left:400px;top:80px;-o-transform:rotate(270deg) scale(0.8,0.6);} 95%{left:90px;top:40px;-o-transform:rotate(320deg) scale(0.8,0.7);} 98%{left:50px;top:22px;-o-transform:rotate(360deg) scale(1,1);} 100%{left:50px;top:22px;-o-transform:rotate(360deg) scale(1,1);} } @-moz-keyframes mybird{ 0% {left:50px;top:22px;-moz-transform:rotate(0deg) scale(1,1);} 3%{left:70px;top:-25px;-moz-transform:rotate(70deg) scale(0.8,0.6);} 8%{left:200px;top:10px;-moz-transform:rotate(90deg) scale(0.7,0.7);} 15%{left:400px;top:20px;-moz-transform:rotate(100deg) scale(0.8,0.6);} 20%{left:600px;top:3px;-moz-transform:rotate(70deg) scale(0.7,0.7);} 30%{left:780px;top:-10px;-moz-transform:rotate(60deg) scale(0.8,0.6);} 50%{left:1400px;top:10px;-moz-transform:rotate(80deg) scale(0.7,0.8);} 54%{left:1300px;top:60px;-moz-transform:rotate(230deg) scale(0.7,0.6);} 60%{left:1100px;top:20px;-moz-transform:rotate(300deg) scale(0.8,0.8);} 70%{left:800px;top:50px;-moz-transform:rotate(280deg) scale(0.7,0.7);} 85%{left:400px;top:80px;-moz-transform:rotate(270deg) scale(0.8,0.6);} 95%{left:90px;top:40px;-moz-transform:rotate(320deg) scale(0.8,0.7);} 98%{left:50px;top:22px;-moz-transform:rotate(360deg) scale(1,1);} 100%{left:50px;top:22px;-moz-transform:rotate(360deg) scale(1,1);} } @keyframes mybird{ 0% {left:50px;top:22px;transform:rotate(0deg) scale(1,1);} 3%{left:70px;top:-25px;transform:rotate(70deg) scale(0.8,0.6);} 8%{left:200px;top:10px;transform:rotate(90deg) scale(0.7,0.7);} 15%{left:400px;top:20px;transform:rotate(100deg) scale(0.8,0.6);} 20%{left:600px;top:3px;transform:rotate(70deg) scale(0.7,0.7);} 30%{left:780px;top:-10px;transform:rotate(60deg) scale(0.8,0.6);} 50%{left:1400px;top:10px;transform:rotate(80deg) scale(0.7,0.8);} 54%{left:1300px;top:60px;transform:rotate(230deg) scale(0.7,0.6);} 60%{left:1100px;top:20px;transform:rotate(300deg) scale(0.8,0.8);} 70%{left:800px;top:50px;transform:rotate(280deg) scale(0.7,0.7);} 85%{left:400px;top:80px;transform:rotate(270deg) scale(0.8,0.6);} 95%{left:90px;top:40px;transform:rotate(320deg) scale(0.8,0.7);} 98%{left:50px;top:22px;transform:rotate(360deg) scale(1,1);} 100%{left:50px;top:22px;transform:rotate(360deg) scale(1,1);} }

  1. circle{

animation: mycircle 10s linear infinite; -webkit-animation:mycircle 10s linear 0s infinite; -moz-animation: mycircle 10s linear 0s infinite; } @-webkit-keyframes mycircle{ 0% {-webkit-transform:rotate(0deg); } 100% {-webkit-transform:rotate(180deg) ;} } @-moz-keyframes mycircle{ 0% {-moz-transform:rotate(0deg); } 100% {-moz-transform:rotate(180deg) ;} } @keyframes mycircle{ 0% {transform:rotate(0deg); } 100% {transform:rotate(180deg) ;} } @-ms-keyframes mycircle{ 0% {-ms-transform:rotate(0deg); } 100% {-ms-transform:rotate(180deg) ;} } .nav{ margin:0px; padding:0px; background:#2980b9; height:40px; width:1366px; border-bottom:#000 solid 1px; } .nav ul{ width:100%; height:40px; list-style:none; margin:0px; padding:0px; } .nav ul li{ width:149px; margin:0px; padding:0px; display:block; float:left; } .nav ul li a{ text-decoration:none; display:block; padding-top:10px; padding-bottom:10px; padding-left:5px; padding-right:5px; margin:0px; background:#2980b9; color:#FFF; font-size:17px; font-family:Verdana, Geneva, sans-serif; text-align:center;

-webkit-transition:all 0.1s linear; -ms-transition:all 0.1s linear; -o-transition:all 0.1s linear; -moz-transition:all 0.1s linear; transition:all 0.1s linear; } .nav ul ul a{ font-size:17px; } .nav ul li ul{ display:none; } .nav ul li a:hover{ background:#666; } .nav ul li:hover ul{ display:block; } .nav li li{ border:thin #CCC dashed; }


.nav1{ position:fixed; left:0px; top:284px; padding:0px; width:195px;

border:0px solid #FF0;

} .nav1 ul{ list-style:none; margin:0px; padding:0px; float:right; width:150px; } .nav1 li{ float:right; border:0px #33FF00 solid; display:block; text-align:right; } .nav1 a{ text-decoration:none; color:#f4f4f4; font-size:18px; width:130px; height:35px; float:right; padding-right:25px; padding-left:15px; line-height:35px; font-family:Verdana, Geneva, sans-serif; border:0px #FF0000 solid; } .ul02 a{ font-size:15px; color:#CCCCCC; width:140px; } .ul02{ display:none; } .li01>a:hover{ color:#fff; fontr-weight:bold; background-color:rgba(255,255,255,0.2) } .ul02 a:hover{ color:#fff;

} .maincontent{ position:absolute; top:270px; left:195px; width:880px; min-height:600px; padding-top:10px; padding-left:40px; padding-right:40px; color:#F9F9F9; font-size:24px; font-family:Georgia, "Times New Roman", Times, serif; border-left:thin solid #CCC; border-right:thin solid #CCC; background-color:rgba(255,255,255,0.2); z-index:-99; }

.bread{ position:absolute; z-index:-999; width:100%; height:50px; top:230px; color:#CCC; font-size:15px; font-family:Verdana, Geneva, sans-serif; padding-left:196px; } .footer{ padding-top:5px; padding-bottom:3px; position:fixed; width: 100%; height: 23px; bottom:0px; letter-spacing:2px; text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 15px; background-color:rgba(102,102,102,.5); color:#FFF; } .backup{ position:fixed; cursor:pointer; bottom:15px; right:-40px; width:90px; height:90px; } .content_str{ width:200px; border:5px rgba(255,255,255,0.9) solid; border-radius:6px; -webkit-box-shadow: -3px 3px 5px #666; -moz-box-shadow: -3px 3px 5px #666; 

 	-o-box-shadow: -3px 3px 5px #666;
 	box-shadow: -3px 3px 5px #666;

} h1,h3{ font-family:Verdana, Geneva, sans-serif; } h1{ text-shadow:0px 0px 7px rgba(255,255,255,1); } h3{ font-weight:100; font-size:29px; text-shadow:0px 0px 4px rgba(255,255,255,1); }

  1. backup{

position:fixed; cursor:pointer; bottom:195px; right:150px; width:40px; height:40px; }

Retrieved from "http://2014.igem.org/Team:BIT-China/css/all.css"