From cb0237b83d1d7dc63c70efcdda31de14cb9ecf9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BD=97=E5=AE=AA?= <liangjun.jiang@alipay.com>
Date: Thu, 28 May 2015 17:35:56 +0800
Subject: [PATCH] =?UTF-8?q?loading=E8=B7=9F=E9=A6=96=E9=A1=B5=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89=E6=BB=9A=E5=8A=A8=E6=9D=A1=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/home.js   |   8 ++--
 static/style.css | 103 ++++++++++++++++++++++-------------------------
 2 files changed, 52 insertions(+), 59 deletions(-)

diff --git a/static/home.js b/static/home.js
index ee671b2486..13b0d2be38 100644
--- a/static/home.js
+++ b/static/home.js
@@ -74,7 +74,8 @@ $(function () {
         },
         loadImg: function () {
             var self = this;
-            var loadBox = $("<div class='load-box'><em></em></div>").appendTo(self.animBox);
+            var loadBox = $("<div class='load-box'><em><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' width='50' height='50'></em>" +
+            "</div>").appendTo(self.box);
             var img = new Image();
             img.onload = function () {
                 loadBox.addClass("load-out").one(animEndStr, function () {
@@ -255,9 +256,6 @@ $(function () {
             }
         }
     };
-
-    $("#main").one(animEndStr, function () {
-        bannerAnim.init()
-    })
+    bannerAnim.init()
 
 });
diff --git a/static/style.css b/static/style.css
index b42f79170d..fd7a5b986f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -228,6 +228,7 @@ header {
   width: 100%;
   height: 100%;
   overflow: hidden;
+
 }
 .perspective {
   vertical-align: top;
@@ -238,8 +239,9 @@ header {
 .main {
   overflow: hidden;
   position: relative;
-  min-height: calc(100% - 200px);
+  min-height: calc(100% - 210px);
   transform-style: preserve-3d;
+    transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
   transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
 }
 .banner-box {
@@ -248,8 +250,8 @@ header {
   min-height: 600px;
   position: relative;
   overflow: inherit;
-  -webkit-animation: alphaTo .3s ease-out;
-  animation: alphaTo .3s ease-out;
+    -webkit-animation: alphaTo .3s ease-out;
+    animation: alphaTo .3s ease-out;
 
 }
 .banner-box .banner-img {
@@ -269,64 +271,35 @@ header {
   z-index: 2;
     background: #2d2d2d
 }
-.load-main-box {
-  top: 0;
-  background: rgba(100, 100, 100, 0.15);
-  animation: alphaTo .3s ease-out;
-  -webkit-animation: alphaTo .3s ease-out;
-}
+
 .load-box {
-  width: 40px;
-  height: 40px;
-  background: #ffffff;
-  border-radius: 4px;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
-  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
+    -webkit-perspective: 300px;
+    -moz-perspective: 300px;
+    width: 50px;
+    height: 50px;
   position: absolute;
   top: 50%;
   left: 50%;
-  margin-left: -20px;
-  margin-top: -20px;
+  margin-left: -25px;
+  margin-top: -25px;
+    z-index: 99;
+    animation: alphaTo .3s ease-out;
+    -webkit-animation: alphaTo .3s ease-out;
 }
-.load-box em {
-  display: block;
-  width: 20px;
-  height: 20px;
-  border-radius: 20px 20px 0 0;
-  background: linear-gradient(0deg, transparent 50%, #6EB4E0 50%);
-  margin: 10px;
-  position: relative;
-  float: left;
-  animation: RotaeX 1.5s infinite linear;
-  -webkit-animation: RotaeX 1.5s infinite linear;
-}
-.load-box em:before,
-.load-box em:after {
-  content: "";
-  display: block;
-}
-.load-box em:before {
-  width: 14px;
-  height: 14px;
-  border-radius: 14px;
-  margin: 3px auto;
-  position: relative;
-  z-index: 1;
-  background: #ffffff;
-}
-.load-box em:after {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-radius: 20px;
-  top: 0;
-  background: linear-gradient(90deg, #6EB4E0, transparent);
+.load-box em{
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    -ms-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    display: block;
+    width: 50px;
+    height: 50px;
+    animation: loadTween 1S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
 }
+
 .load-out {
-  transform: scale(0, 0);
-  -webkit-animation: scaleOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
-  animation: scaleOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  -webkit-animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 .banner-box #bannerAnim .banner-line-absolute {
   position: absolute;
@@ -1017,6 +990,28 @@ footer ul li > a {
     transform: rotate(360deg);
   }
 }
+@keyframes loadTween {
+    0%{
+        transform: rotateY(0deg);
+    }
+    50%{
+        transform: rotateY(180deg);
+    }
+    100%{
+        transform: rotateX(-180deg);
+    }
+}
+@-webkit-keyframes loadTween {
+    0%{
+        -webkit-transform: rotateY(0deg);
+    }
+    50%{
+        -webkit-transform: rotateY(180deg);
+    }
+    100%{
+        -webkit-transform: rotateX(-180deg);
+    }
+ }
 
 /* 首页有动画 */
 .index-page .nav {