Difference between revisions of "Team:Tianjin"
| Line 5: | Line 5: | ||
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" name="viewport"> | <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" name="viewport"> | ||
<title>Team:Tianjin - 2018.igem.org</title> | <title>Team:Tianjin - 2018.igem.org</title> | ||
| + | |||
| + | <!-- load.css --> | ||
| + | <style> | ||
| + | #loading{width:100%;height:100%;z-index:999999;position:fixed;text-align:center;}.loadingClock{width:150px;height:150px;position:relative;background:url(https://static.igem.org/mediawiki/2018/5/5a/T--Tianjin--backClock.png);top:50%;left:50%;margin-left:-75px;margin-top:-75px;background-size:100% 100%;-moz-background-size:100% 100%;z-index:999999;}.loadh,.loadm,.loads{width:100%;height:100%;position:absolute;}.loadh{transform:rotate(-60deg);animation:loadh 4.8s linear infinite;}.loadm{transform:rotate(60deg);animation:loadm 0.8s linear infinite;}.loads{transform:rotate(120deg);animation:loads 0.16s linear infinite;}.loadingPoint{position:relative;width:50%;margin:auto;}.loadingPoint span{display:block;width:9px;height:5px;position:absolute;animation:loadingPoint 1.5s infinite ease-in-out;}.loadingPoint span:nth-child(1){left:47%;}.loadingPoint span:nth-child(2){left:50%;animation-delay:.2s;}.loadingPoint span:nth-child(3){left:53%;animation-delay:.4s}@keyframes loadh{from{transform:rotate(-60deg);}to{transform:rotate(300deg);}}@keyframes loadm{from{transform:rotate(60deg);}to{transform:rotate(420deg);}}@keyframes loads{from{transform:rotate(120deg);}to{transform:rotate(480deg);}}@keyframes loadingPoint{0%{transform:translateY(0px);}25%{transform:translateY(15px);}50%{transform:translateY(0px);}100%{transform:translateY(0px);}}.handh{width:0px;height:0px;position:relative;margin-left:auto;margin-right:auto;border-style:solid;border-color:transparent transparent white transparent;}.handm{width:0px;height:0px;position:relative;margin-left:auto;margin-right:auto;top:0;border-style:solid;border-color:transparent transparent white transparent;}.hands{width:0px;height:0px;position:relative;margin-left:auto;margin-right:auto;border-style:solid;border-color:transparent transparent white transparent;}.loadingP{color:white;position:relative;top:70%;font-size:40px;z-index:999999;}.loadingMask{width:50%;position:fixed;top:0px;height:100%;background:black;}.moveLeft{animation:moveLeft 1s ease-in;}.moveRight{animation:moveRight 1s ease-in;}@keyframes moveLeft{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}@keyframes moveRight{0%{transform:translateX(0);}100%{transform:translateX(100%);}} | ||
| + | </style> | ||
| + | |||
| + | <div id="loading"> | ||
| + | <div class="loadingClock"> | ||
| + | <div class="loadh"> | ||
| + | <div class="handh" style="top: 25px;border-width: 0px 3px 50px 3px;"></div> | ||
| + | </div> | ||
| + | <div class="loadm"> | ||
| + | <div class="handm" style="border-width: 0px 2px 75px 2px;"></div> | ||
| + | </div> | ||
| + | <div class="loads"> | ||
| + | <div class="hands" style="top: -5px;border-width: 0px 1px 80px 1px;"> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="loadingP"> | ||
| + | <p>ON LOADING</p> | ||
| + | <div class="loadingPoint"> | ||
| + | <span class="loadingPoint1">.</span> | ||
| + | <span class="loadingPoint2">.</span> | ||
| + | <span class="loadingPoint3">.</span> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="loadingLeft loadingMask" style="left: 0;"></div> | ||
| + | <div class="loadingRight loadingMask" style="right: 0;"></div> | ||
| + | </div> | ||
| + | |||
| + | <script type="text/javascript">$(document).ready(function({$('.loadingLeft').addClass("moveLeft");$('.loadingRight').addClass("moveRight");setTimeout(function(){ $('#loading').remove();},1000);})</script> | ||
| + | |||
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> | <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
<script src="https://2016.igem.org/wiki/index.php?title=Team:Tianjin/js/material/jquery&action=raw&ctype=text/javascript"></script> | <script src="https://2016.igem.org/wiki/index.php?title=Team:Tianjin/js/material/jquery&action=raw&ctype=text/javascript"></script> | ||
| Line 27: | Line 60: | ||
<style> | <style> | ||
.titleBox{padding-top:200px}.textCon{padding-left:100px;padding-right:100px}.title{text-align:center;font-weight:400;font-family:'Quicksand',sans-serif;text-align:center;border-bottom:0}.title-big{font-size:3em}.title-normal{font-size:2em;margin-bottom:25px;color:#5265f0}.title-small{font-size:1.8em;color:#222;font-family:'Mysteries of Passion Personal Use',sans-serif}.partition{padding-top:130px}.text{margin-top:25px;margin-bottom:50px;font-weight:400!important;font-size:18px!important;line-height:1.5}.picture{margin-top:25px}.navbar-collapse{font-family:'Rounded Rough',sans-serif!important;font-size:20px!important} | .titleBox{padding-top:200px}.textCon{padding-left:100px;padding-right:100px}.title{text-align:center;font-weight:400;font-family:'Quicksand',sans-serif;text-align:center;border-bottom:0}.title-big{font-size:3em}.title-normal{font-size:2em;margin-bottom:25px;color:#5265f0}.title-small{font-size:1.8em;color:#222;font-family:'Mysteries of Passion Personal Use',sans-serif}.partition{padding-top:130px}.text{margin-top:25px;margin-bottom:50px;font-weight:400!important;font-size:18px!important;line-height:1.5}.picture{margin-top:25px}.navbar-collapse{font-family:'Rounded Rough',sans-serif!important;font-size:20px!important} | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</style> | </style> | ||
| Line 49: | Line 77: | ||
$('.igem_2018_team_menu').remove();*/ | $('.igem_2018_team_menu').remove();*/ | ||
</script> | </script> | ||
| − | |||
</head> | </head> | ||
<body> | <body> | ||
Revision as of 01:38, 11 August 2018
ON LOADING
.
.
.
