A-A+

纯CSS3实现Win8动画加载

2014年12月09日 交互设计 评论 1 条 阅读 1,272 次

分享一款纯css3实现win8动画加载,这款实例动画效果完全由css3实现。

 

 

html代码:

  1. <div class="wrapp">
  2.         <div class="text">
  3.             <h1>
  4.                 Windows 8</h1>
  5.         </div>
  6.         <div class="logo">
  7.             <span class="top-left"></span><span class="bottom-right"></span>
  8.         </div>
  9.     </div>

css3代码:隐藏代码

  1. body{
  2.     margin: 0;
  3.     padding: 0;
  4.     background-color#90da15;
  5. }
  6. .wrapp{
  7.     positionabsolute;
  8.     top: 50%;
  9.     left: 50%;
  10.     width600px;
  11.     height300px;
  12.     margin: -150px 0 0 -300px;
  13.     -webkit-perspective: 30px;
  14.     -webkit-transform: translateX(0px);
  15.     -webkit-animation: wrapp 400ms 800ms ease-in forwards;
  16.     -moz-perspective: 30px;
  17.     -moz-transform: translateX(0px);
  18.     -moz-animation: wrapp 400ms 800ms ease-in forwards;
  19.     -ms-perspective: 30px;
  20.     -ms-transform: translateX(0px);
  21.     -ms-animation: wrapp 400ms 800ms ease-in forwards;
  22.     perspective: 30px;
  23.     transform: translateX(0px);
  24.     animation: wrapp 400ms 800ms ease-in forwards;
  25. }
  26. .text{
  27.     positionabsolute;
  28.     top: 50%;
  29.     left: 50%;
  30.     width0px;
  31.     height60px;
  32.     margin: -30px 0 0 -160px;
  33.     overflowhidden;
  34.     -webkit-transform: translateX(0px);
  35.     -webkit-animation: text 400ms 800ms linear forwards;
  36.     -moz-transform: translateX(0px);
  37.     -moz-animation: text 400ms 800ms linear forwards;
  38.     -ms-transform: translateX(0px);
  39.     -ms-animation: text 400ms 800ms linear forwards;
  40.     transform: translateX(0px);
  41.     animation: text 400ms 800ms linear forwards;
  42. }
  43. h1{
  44.     floatrightright;
  45.     font-family"Segoe UI", Frutiger, "Frutiger Linotype""Dejavu Sans""Helvetica Neue"Arialsans-serif;
  46.     font-weightnormal;
  47.     color#fff;
  48.     padding: 0;
  49.     margin: 0;
  50.     width320px;
  51.     height60px;
  52.     font-size60px;
  53.     line-height60px;
  54. }
  55. .logo{
  56.     positionabsolute;
  57.     top: 50%;
  58.     left: 50%;
  59.     width90px;
  60.     height90px;
  61.     margin: -45px 0 0 -45px;
  62.     background-color#fff;
  63.     -webkit-transform: translateX(0px) rotateY(10deg);
  64.     -webkit-animation: logo 500ms 300ms ease-out forwards;
  65.     -moz-transform: translateX(0px) rotateY(10deg);
  66.     -moz-animation: logo 500ms 300ms ease-out forwards;
  67.     -ms-transform: translateX(0px) rotateY(10deg);
  68.     -ms-animation: logo 500ms 300ms ease-out forwards;
  69.     transform: translateX(0px) rotateY(10deg);
  70.     animation: logo 500ms 300ms ease-out forwards;
  71. }
  72. .logo .top-left{
  73.     positionabsolute;
  74.     top: 0;
  75.     left: 0;
  76.     width44px;
  77.     height44px;
  78.     border-rightsolid 2px #90da15;
  79.     border-bottomsolid 2px #90da15;
  80. }
  81. .logo .bottombottom-rightright{
  82.     positionabsolute;
  83.     bottombottom: 0;
  84.     rightright: 0;
  85.     width44px;
  86.     height44px;
  87.     border-leftsolid 2px #90da15;
  88.     border-topsolid 2px #90da15;
  89. }
  90. @-webkit-keyframes logo {
  91.     from {
  92.         -webkit-transform:  translateX(0px) rotateY(10deg);
  93.     }
  94.     to {
  95.         -webkit-transform:  translateX(0px) rotateY(-10deg);
  96.     }
  97. }
  98. @-webkit-keyframes text {
  99.     from {
  100.         width0px;
  101.         -webkit-transform: translateX(0px);
  102.     }
  103.     60%{
  104.         width0px;
  105.     }
  106.     to {
  107.         width320px;
  108.         -webkit-transform: translateX(240px);
  109.     }
  110. }
  111. @-webkit-keyframes wrapp {
  112.     from {
  113.         -webkit-transform: translateX(0px);
  114.     }
  115.     to {
  116.         -webkit-transform: translateX(-200px);
  117.     }
  118. }
  119. @-moz-keyframes logo {
  120.     from {
  121.         -moz-transform:  translateX(0px) rotateY(10deg);
  122.     }
  123.     to {
  124.         -moz-transform:  translateX(0px) rotateY(-10deg);
  125.     }
  126. }
  127. @-moz-keyframes text {
  128.     from {
  129.         width0px;
  130.         -moz-transform: translateX(0px);
  131.     }
  132.     60%{
  133.         width0px;
  134.     }
  135.     to {
  136.         width320px;
  137.         -moz-transform: translateX(240px);
  138.     }
  139. }
  140. @-moz-keyframes wrapp {
  141.     from {
  142.         -moz-transform: translateX(0px);
  143.     }
  144.     to {
  145.         -moz-transform: translateX(-200px);
  146.     }
  147. }
  148. @-ms-keyframes logo {
  149.     from {
  150.         -ms-transform:  translateX(0px) rotateY(10deg);
  151.     }
  152.     to {
  153.         -ms-transform:  translateX(0px) rotateY(-10deg);
  154.     }
  155. }
  156. @-ms-keyframes text {
  157.     from {
  158.         width0px;
  159.         -ms-transform: translateX(0px);
  160.     }
  161.     60%{
  162.         width0px;
  163.     }
  164.     to {
  165.         width320px;
  166.         -ms-transform: translateX(240px);
  167.     }
  168. }
  169. @-ms-keyframes wrapp {
  170.     from {
  171.         -ms-transform: translateX(0px);
  172.     }
  173.     to {
  174.         -ms-transform: translateX(-200px);
  175.     }
  176. }
  177. @keyframes logo {
  178.     from {
  179.         transform:  translateX(0px) rotateY(10deg);
  180.     }
  181.     to {
  182.         transform:  translateX(0px) rotateY(-10deg);
  183.     }
  184. }
  185. @keyframes text {
  186.     from {
  187.         width0px;
  188.         transform: translateX(0px);
  189.     }
  190.     60%{
  191.         width0px;
  192.     }
  193.     to {
  194.         width320px;
  195.         transform: translateX(240px);
  196.     }
  197. }
  198. @keyframes wrapp {
  199.     from {
  200.         transform: translateX(0px);
  201.     }
  202.     to {
  203.         transform: translateX(-200px);
  204.     }
  205. }

标签:

1 条留言  访客:1 条  博主:0 条

  1. 大路

    没有效果图可以看的么?哈哈

给我留言