Difference between revisions of "Team:NJU-China/Model"

Line 10: Line 10:
 
   <link href="https://2016.igem.org/Team:NJU-China/mdlib/mdiconcss?action=raw&amp;ctype=text/css" rel="stylesheet">
 
   <link href="https://2016.igem.org/Team:NJU-China/mdlib/mdiconcss?action=raw&amp;ctype=text/css" rel="stylesheet">
 
   <style>
 
   <style>
−
  /*test*/
 
−
  .dt-loading{background:rgba(0,0,0,0.9);width:100%;height:100%;z-index:101;text-align:center;position:fixed;top:0;bottom:0;left:0;right:0;padding:20% 0}
 
−
.laying{background-color:rgba(0,0,0,0);border:5px solid rgba(97,225,255,0.9);opacity:.9;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #187BD8;width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite ease-in-out;-o-animation:spinPulse 1s infinite ease-in-out;animation:spinPulse 1s infinite ease-in-out}
 
−
.layout{background-color:rgba(0,0,0,0);border:5px solid rgba(97,145,255,0.9);opacity:.9;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #187BD8;width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;animation:spinoffPulse 1s infinite linear}
 
−
@-moz-keyframes spinPulse{0{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #187BD8}
 
−
50%{-moz-transform:rotate(145deg);opacity:1}
 
−
100%{-moz-transform:rotate(-320deg);opacity:0}
 
−
}
 
−
@-moz-keyframes spinoffPulse{0{-moz-transform:rotate(0)}
 
−
100%{-moz-transform:rotate(360deg)}
 
−
}
 
−
@-webkit-keyframes spinPulse{0{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #187BD8}
 
−
50%{-webkit-transform:rotate(145deg);opacity:1}
 
−
100%{-webkit-transform:rotate(-320deg);opacity:0}
 
−
}
 
−
@-webkit-keyframes spinoffPulse{0{-webkit-transform:rotate(0)}
 
−
100%{-webkit-transform:rotate(360deg)}
 
−
}
 
−
@-o-keyframes spinPulse{0{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #187BD8}
 
−
50%{-o-transform:rotate(145deg);opacity:1}
 
−
100%{-o-transform:rotate(-320deg);opacity:0}
 
−
}
 
−
@-o-keyframes spinoffPulse{0{-o-transform:rotate(0)}
 
−
100%{-o-transform:rotate(360deg)}
 
−
}
 
−
@keyframes spinPulse{0{transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #187BD8}
 
−
50%{transform:rotate(145deg);opacity:1}
 
−
100%{transform:rotate(-320deg);opacity:0}
 
−
}
 
−
@keyframes spinoffPulse{0{transform:rotate(0)}
 
−
100%{transform:rotate(360deg)}
 
−
}
 
−
 
 
     /* mod */
 
     /* mod */
  
Line 114: Line 81:
 
       <a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"> <i class="material-icons">menu</i> </a>
 
       <a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"> <i class="material-icons">menu</i> </a>
 
     </div>
 
     </div>
−
     <ul id="nav-mobile" class="side-nav">
+
     <ul id="nav-mobile" class="side-nav" style="transform: translateX(0%);">
 
       <li class="logo">
 
       <li class="logo">
 
         <a id="logo-container" href="https://2016.igem.org/Team:NJU-China" class="brand-logo"> <img src="https://static.igem.org/mediawiki/2016/c/c8/NJU_China_2016_iGEM_logo.png" alt="NJU-China LOGO" class="responsive-img"> </a>
 
         <a id="logo-container" href="https://2016.igem.org/Team:NJU-China" class="brand-logo"> <img src="https://static.igem.org/mediawiki/2016/c/c8/NJU_China_2016_iGEM_logo.png" alt="NJU-China LOGO" class="responsive-img"> </a>
Line 257: Line 224:
 
   </main>
 
   </main>
 
   <footer> </footer>
 
   <footer> </footer>
−
  <div class='dt-loading'>  <div class='laying'></div>  <div class='layout'></div> </div>
 
 
   <!-- 理论上应用 2.1.4 版本的 jQuery，但是iGEM官方提供 1.11.1 -->
 
   <!-- 理论上应用 2.1.4 版本的 jQuery，但是iGEM官方提供 1.11.1 -->
 
   <!-- jQuery 2.1.4 -->
 
   <!-- jQuery 2.1.4 -->
Line 269: Line 235:
 
     // Initialize collapsible (uncomment the line below if you use the dropdown variation)
 
     // Initialize collapsible (uncomment the line below if you use the dropdown variation)
 
     $('.collapsible').collapsible();
 
     $('.collapsible').collapsible();
−
    // Loading动画
 
−
    $(".dt-loading").fadeOut('slow');
 
−
    setTimeout(function() {  $(".dt-loading").fadeOut('slow'); },6000);
 
 
   </script>
 
   </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 13:48, 8 October 2016

menu

Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg

Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz. Abcdefg hijklmnop qrs tuv wx yz.

  • filter_dramaFirst

    Lorem ipsum dolor sit amet.

  • placeSecond

    Lorem ipsum dolor sit amet.

  • whatshotThird

    Lorem ipsum dolor sit amet.

  • filter_dramaFirst

    Lorem ipsum dolor sit amet.

  • placeSecond

    Lorem ipsum dolor sit amet.

  • whatshotThird

    Lorem ipsum dolor sit amet.

  • filter_dramaFirst

    Lorem ipsum dolor sit amet.

  • placeSecond

    Lorem ipsum dolor sit amet.

  • whatshotThird

    Lorem ipsum dolor sit amet.