css_animation.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>H+ 后台主题UI框架 - css动画</title>
  7. <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  8. <meta name="description" content="H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术">
  9. <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  10. <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  11. <link href="../css/animate.min.css" rel="stylesheet">
  12. <link href="../css/style.min.css?v=4.1.0" rel="stylesheet">
  13. </head>
  14. <body class="gray-bg">
  15. <div class="wrapper wrapper-content animated fadeIn">
  16. <div class="row">
  17. <div class="col-sm-12">
  18. <div class="ibox float-e-margins">
  19. <div class="ibox-title">
  20. <h5>CSS动画 <small>http://daneden.github.io/animate.../css/</small></h5>
  21. <div class="ibox-tools">
  22. <a class="collapse-link">
  23. <i class="fa fa-chevron-up"></i>
  24. </a>
  25. <a class="dropdown-toggle" data-toggle="dropdown" href="css_animation.html#">
  26. <i class="fa fa-wrench"></i>
  27. </a>
  28. <ul class="dropdown-menu dropdown-user">
  29. <li><a href="css_animation.html#">选项1</a>
  30. </li>
  31. <li><a href="css_animation.html#">选项2</a>
  32. </li>
  33. </ul>
  34. <a class="close-link">
  35. <i class="fa fa-times"></i>
  36. </a>
  37. </div>
  38. </div>
  39. <div class="ibox-content text-center css-animation-box">
  40. <h1 class="text-navy">
  41. Animation.css
  42. </h1>
  43. <p>
  44. Animation.css是一个迷人的动画库,它提供了一堆很酷的,有趣的,跨浏览器的动画,你可以在项目中调用它们。
  45. </p>
  46. <div class="hr-line-dashed"></div>
  47. <div class="row">
  48. <div class="col-sm-6 text-center">
  49. <h4 class="m-b-lg">
  50. 动画效果示例框
  51. </h4>
  52. <div id="animation_box" class="animated">
  53. <div class="text-center wrapper-content animation-text-box">
  54. <h2>48%</h2>
  55. <p>市场销售额</p>
  56. </div>
  57. <div id="rickshaw_multi" class="rickshaw_graph"></div>
  58. </div>
  59. </div>
  60. <div class="col-sm-6 animation-efect-links text-center">
  61. <h4 class="m-b-lg">
  62. 点击下面按钮,可以从“动画效果示例框”中预览效果
  63. </h4>
  64. <!--<h5 class="text-navy">Attention Seekers</h5>-->
  65. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounce">bounce</a>
  66. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="flash">flash</a>
  67. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="pulse">pulse</a>
  68. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rubberBand">rubberBand</a>
  69. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="shake">shake</a>
  70. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="swing">swing</a>
  71. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="tada">tada</a>
  72. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="wobble">wobble</a>
  73. <!--<h5 class="text-navy">Bouncing Entrances</h5>-->
  74. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceIn">bounceIn</a>
  75. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceInDown">bounceInDown</a>
  76. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceInLeft">bounceInLeft</a>
  77. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceInRight">bounceInRight</a>
  78. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceInUp">bounceInUp</a>
  79. <!--<h5 class="text-navy">Bouncing Exits</h5>-->
  80. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceOut">bounceOut</a>
  81. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceOutDown">bounceOutDown</a>
  82. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceOutLeft">bounceOutLeft</a>
  83. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceOutRight">bounceOutRight</a>
  84. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="bounceOutUp">bounceOutUp</a>
  85. <!--<h5 class="text-navy">Fading Entrances</h5>-->
  86. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeIn">fadeIn</a>
  87. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeInDown">fadeInDown</a>
  88. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeInDownBig">fadeInDownBig</a>
  89. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeInLeft">fadeInLeft</a>
  90. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeInLeftBig">fadeInLeftBig</a>
  91. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeInRight">fadeInRight</a>
  92. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeInRightBig">fadeInRightBig</a>
  93. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeInUp">fadeInUp</a>
  94. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeInUpBig">fadeInUpBig</a>
  95. <!--<h5 class="text-navy">Fading Exits</h5>-->
  96. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeOut">fadeOut</a>
  97. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeOutDown">fadeOutDown</a>
  98. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeOutDownBig">fadeOutDownBig</a>
  99. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeOutLeft">fadeOutLeft</a>
  100. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeOutLeftBig">fadeOutLeftBig</a>
  101. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeOutRight">fadeOutRight</a>
  102. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeOutRightBig">fadeOutRightBig</a>
  103. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeOutUp">fadeOutUp</a>
  104. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="fadeOutUpBig">fadeOutUpBig</a>
  105. <!--<h5 class="text-navy">Flippers</h5>-->
  106. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="flip">flip</a>
  107. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="flipInX">flipInX</a>
  108. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="flipInY">flipInY</a>
  109. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="flipOutX">flipOutX</a>
  110. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="flipOutY">flipOutY</a>
  111. <!--<h5 class="text-navy">Lightspeed</h5>-->
  112. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="lightSpeedIn">lightSpeedIn</a>
  113. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="lightSpeedOut">lightSpeedOut</a>
  114. <!--<h5 class="text-navy">Rotating Entrances</h5>-->
  115. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateIn">rotateIn</a>
  116. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateInDownLeft">rotateInDownLeft</a>
  117. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateInDownRight">rotateInDownRight</a>
  118. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateInUpLeft">rotateInUpLeft</a>
  119. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateInUpRight">rotateInUpRight</a>
  120. <!--<h5 class="text-navy">Rotating Exits</h5>-->
  121. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateOut">rotateOut</a>
  122. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateOutDownLeft">rotateOutDownLeft</a>
  123. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateOutDownRight">rotateOutDownRight</a>
  124. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateOutUpLeft">rotateOutUpLeft</a>
  125. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rotateOutUpRight">rotateOutUpRight</a>
  126. <!--<h5 class="text-navy">Sliders</h5>-->
  127. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="slideInDown">slideInDown</a>
  128. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="slideInLeft">slideInLeft</a>
  129. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="slideInRight">slideInRight</a>
  130. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="slideOutLeft">slideOutLeft</a>
  131. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="slideOutRight">slideOutRight</a>
  132. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="slideOutUp">slideOutUp</a>
  133. <!--<h5 class="text-navy">Specials</h5>-->
  134. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="hinge">hinge</a>
  135. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rollIn">rollIn</a>
  136. <a href="css_animation.html#" class="btn btn-white animation_select" data-animation="rollOut">rollOut</a>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. <script src="../js/jquery.min.js?v=2.1.4"></script>
  145. <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  146. <script src="../js/plugins/peity/jquery.peity.min.js"></script>
  147. <script src="../js/content.min.js?v=1.0.0"></script>
  148. <script src="../js/plugins/rickshaw/vendor/d3.v3.js"></script>
  149. <script src="../js/plugins/rickshaw/rickshaw.min.js"></script>
  150. <script>
  151. $(document).ready(function(){$(".animation_select").click(function(){$("#animation_box").removeAttr("class").attr("class","");var animation=$(this).attr("data-animation");$("#animation_box").addClass("animated");$("#animation_box").addClass(animation);return false});var graph2=new Rickshaw.Graph({element:document.querySelector("#rickshaw_multi"),renderer:"area",stroke:true,series:[{data:[{x:0,y:2},{x:1,y:5},{x:2,y:8},{x:3,y:4},{x:4,y:8}],color:"#1ab394",stroke:"#17997f"},{data:[{x:0,y:13},{x:1,y:15},{x:2,y:17},{x:3,y:12},{x:4,y:10}],color:"#eeeeee",stroke:"#d7d7d7"}]});graph2.renderer.unstack=true;graph2.render()});
  152. </script>
  153. </body>
  154. </html>