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 224: Line 257:
 
   </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 234: Line 268:
 
     $(".button-collapse").sideNav();
 
     $(".button-collapse").sideNav();
 
     // 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');
 
   </script>
 
   </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 13:36, 8 October 2016

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.