一款如何利用纯css3如何实现的win8加载动画的实例分析

网络
啊，小雪，小雪，来了，来了。从微微的凉风中，从傍晚的喧闹中来了！像春风抖落万树梨花，像天女撒下漫天白絮……你不飘飘悠悠，因为那是骄傲的象征；你不轻轻起舞，因为那是胆小的缩影，听，沙沙沙沙、沙沙沙沙……我好像坐在屋里听那春雨的歌声。

　　今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="wrapp">
  2. <divclass="text">
  3. <h1>
  4. Windows8</h1>
  5. </div>
  6. <divclass="logo">
  7. <spanclass="top-left"></span><spanclass="bottom-right"></span>
  8. </div>
  9. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  1. body{
  2. margin:0;
  3. padding:0;
  4. background-color:#90da15;
  5. }
  6. .wrapp{
  7. position:absolute;
  8. top:50%;
  9. left:50%;
  10. width:600px;
  11. height:300px;
  12. margin:-150px00-300px;
  13. -webkit-perspective:30px;
  14. -webkit-transform:translateX(0px);
  15. -webkit-animation:wrapp400ms800msease-inforwards;
  17. -moz-perspective:30px;
  18. -moz-transform:translateX(0px);
  19. -moz-animation:wrapp400ms800msease-inforwards;
  21. -ms-perspective:30px;
  22. -ms-transform:translateX(0px);
  23. -ms-animation:wrapp400ms800msease-inforwards;
  25. perspective:30px;
  26. transform:translateX(0px);
  27. animation:wrapp400ms800msease-inforwards;
  28. }
  29. .text{
  30. position:absolute;
  31. top:50%;
  32. left:50%;
  33. width:0px;
  34. height:60px;
  35. margin:-30px00-160px;
  36. overflow:hidden;
  37. -webkit-transform:translateX(0px);
  38. -webkit-animation:text400ms800mslinearforwards;
  40. -moz-transform:translateX(0px);
  41. -moz-animation:text400ms800mslinearforwards;
  43. -ms-transform:translateX(0px);
  44. -ms-animation:text400ms800mslinearforwards;
  46. transform:translateX(0px);
  47. animation:text400ms800mslinearforwards;
  48. }
  49. h1{
  50. float:rightright;
  51. font-family:"SegoeUI",Frutiger,"FrutigerLinotype","DejavuSans","HelveticaNeue",Arial,sans-serif;
  52. font-weight:normal;
  53. color:#fff;
  54. padding:0;
  55. margin:0;
  56. width:320px;
  57. height:60px;
  58. font-size:60px;
  59. line-height:60px;
  60. }
  61. .logo{
  62. position:absolute;
  63. top:50%;
  64. left:50%;
  65. width:90px;
  66. height:90px;
  67. margin:-45px00-45px;
  68. background-color:#fff;
  69. -webkit-transform:translateX(0px)rotateY(10deg);
  70. -webkit-animation:logo500ms300msease-outforwards;
  72. -moz-transform:translateX(0px)rotateY(10deg);
  73. -moz-animation:logo500ms300msease-outforwards;
  75. -ms-transform:translateX(0px)rotateY(10deg);
  76. -ms-animation:logo500ms300msease-outforwards;
  78. transform:translateX(0px)rotateY(10deg);
  79. animation:logo500ms300msease-outforwards;
  80. }
  81. .logo.top-left{
  82. position:absolute;
  83. top:0;
  84. left:0;
  85. width:44px;
  86. height:44px;
  87. border-right:solid2px#90da15;
  88. border-bottom:solid2px#90da15;
  89. }
  90. .logo.bottombottom-rightright{
  91. position:absolute;
  92. bottombottom:0;
  93. rightright:0;
  94. width:44px;
  95. height:44px;
  96. border-left:solid2px#90da15;
  97. border-top:solid2px#90da15;
  98. }
  100. @-webkit-keyframeslogo{
  101. from{
  102. -webkit-transform:translateX(0px)rotateY(10deg);
  103. }
  104. to{
  105. -webkit-transform:translateX(0px)rotateY(-10deg);
  106. }
  107. }
  108. @-webkit-keyframestext{
  109. from{
  110. width:0px;
  111. -webkit-transform:translateX(0px);
  112. }
  113. 60%{
  114. width:0px;
  115. }
  116. to{
  117. width:320px;
  118. -webkit-transform:translateX(240px);
  119. }
  120. }
  121. @-webkit-keyframeswrapp{
  122. from{
  123. -webkit-transform:translateX(0px);
  124. }
  125. to{
  126. -webkit-transform:translateX(-200px);
  127. }
  128. }
  129. @-moz-keyframeslogo{
  130. from{
  131. -moz-transform:translateX(0px)rotateY(10deg);
  132. }
  133. to{
  134. -moz-transform:translateX(0px)rotateY(-10deg);
  135. }
  136. }
  137. @-moz-keyframestext{
  138. from{
  139. width:0px;
  140. -moz-transform:translateX(0px);
  141. }
  142. 60%{
  143. width:0px;
  144. }
  145. to{
  146. width:320px;
  147. -moz-transform:translateX(240px);
  148. }
  149. }
  150. @-moz-keyframeswrapp{
  151. from{
  152. -moz-transform:translateX(0px);
  153. }
  154. to{
  155. -moz-transform:translateX(-200px);
  156. }
  157. }
  159. @-ms-keyframeslogo{
  160. from{
  161. -ms-transform:translateX(0px)rotateY(10deg);
  162. }
  163. to{
  164. -ms-transform:translateX(0px)rotateY(-10deg);
  165. }
  166. }
  167. @-ms-keyframestext{
  168. from{
  169. width:0px;
  170. -ms-transform:translateX(0px);
  171. }
  172. 60%{
  173. width:0px;
  174. }
  175. to{
  176. width:320px;
  177. -ms-transform:translateX(240px);
  178. }
  179. }
  180. @-ms-keyframeswrapp{
  181. from{
  182. -ms-transform:translateX(0px);
  183. }
  184. to{
  185. -ms-transform:translateX(-200px);
  186. }
  187. }
  188. @keyframeslogo{
  189. from{
  190. transform:translateX(0px)rotateY(10deg);
  191. }
  192. to{
  193. transform:translateX(0px)rotateY(-10deg);
  194. }
  195. }
  196. @keyframestext{
  197. from{
  198. width:0px;
  199. transform:translateX(0px);
  200. }
  201. 60%{
  202. width:0px;
  203. }
  204. to{
  205. width:320px;
  206. transform:translateX(240px);
  207. }
  208. }
  209. @keyframeswrapp{
  210. from{
  211. transform:translateX(0px);
  212. }
  213. to{
  214. transform:translateX(-200px);
  215. }
  216. }

以上就是一款如何利用纯css3如何实现的win8加载动画的实例分析。人生不可能总是顺心如意的，但是持续朝着阳光走，影子就会躲在后面。刺眼，却表明对的方向。更多关于一款如何利用纯css3如何实现的win8加载动画的实例分析请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例