5

public/stylesheets/index.css

@@ -6,7 +6,6 @@
   padding-bottom: 160px;
 }
 .banner .banner-box {
-  width: 1150px;
   margin: 0 auto;
   color: #fff;
 }
@@ -26,7 +25,6 @@
 .download {
   position: relative;
   padding-top: 400px;
-  width: 1150px;
   margin: 0 auto;
 }
 .download .android,
@@ -84,8 +82,20 @@
 }
 /*download end*/
 /*character begin*/
+@keyframes stretch-delay {
+  0%,
+  50%,
+  100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  5%,
+  45% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 .character ul {
-  width: 1150px;
   margin: 80px auto;
 }
 .character ul li {
@@ -101,6 +111,12 @@
   left: 0;
   width: 100%;
   height: 100%;
+  transform: scale(0);
+  opacity: 0;
+  animation-name: stretch-delay;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: forwards;
 }
 .character ul li > div:first-child h3 {
   margin-top: 50px;
@@ -121,6 +137,30 @@
 .character ul li > div:last-child h4 {
   font-size: 14px;
 }
+.character ul li:nth-child(1) > div:first-child {
+  animation-delay: 0s;
+}
+.character ul li:nth-child(1) > div:last-child {
+  animation-delay: 5s;
+}
+.character ul li:nth-child(2) > div:first-child {
+  animation-delay: .25s;
+}
+.character ul li:nth-child(2) > div:last-child {
+  animation-delay: 5.25s;
+}
+.character ul li:nth-child(3) > div:first-child {
+  animation-delay: .5s;
+}
+.character ul li:nth-child(3) > div:last-child {
+  animation-delay: 5.5s;
+}
+.character ul li:nth-child(4) > div:first-child {
+  animation-delay: .75s;
+}
+.character ul li:nth-child(4) > div:last-child {
+  animation-delay: 5.75s;
+}
 /* character end */
 /* projects begin */
 .projects {
@@ -137,8 +177,6 @@
 }
 .projects > header > div:first-child > div {
   position: relative;
-  width: 337.5px;
-  margin-right: 237.5px;
   float: right;
   height: 300px;
 }
@@ -157,8 +195,6 @@
 }
 .projects > header > div:last-child > div {
   position: relative;
-  width: 812.5px;
-  margin-left: -237.5px;
   background-color: #2e2e2e;
   height: 300px;
 }

public/stylesheets/index.less

@@ -7,7 +7,6 @@
   padding-top: 120px;
   padding-bottom: 160px;
   .banner-box {
-    width: @container-width;
     margin: 0 auto;
     color: #fff;
     h1 {
@@ -29,7 +28,6 @@
 .download {
   position: relative;
   padding-top: 400px;
-  width: @container-width;
   margin: 0 auto;
   .android,
   .iphone {
@@ -87,9 +85,18 @@
 
 /*download end*/
 /*character begin*/
+@keyframes stretch-delay {
+  0%, 50%, 100% {
+    transform: scale(0);
+    opacity:0;
+  }
+  5%, 45% {
+    transform: scale(1);
+    opacity:1;
+  }
+}
 .character {
   ul {
-    width: @container-width;
     margin: 80px auto;
     li {
       float: left;
@@ -103,6 +110,12 @@
         left: 0;
         width: 100%;
         height: 100%;
+        transform: scale(0);
+        opacity: 0;
+        animation-name: stretch-delay;
+        animation-duration: 10s;
+        animation-iteration-count: infinite;
+        animation-fill-mode: forwards;
         &:first-child {
           h3 {
             margin-top: 50px;
@@ -113,6 +126,7 @@
             font-size: 16px;
             color: #888;
           }
+
         }
         &:last-child {
           img {
@@ -127,6 +141,46 @@
           }
         }
       }
+      &:nth-child(1){
+        & > div{
+          &:first-child {
+            animation-delay: 0s;
+          }
+          &:last-child {
+            animation-delay: 5s;
+          }
+        }
+      }
+      &:nth-child(2){
+        & > div{
+          &:first-child {
+            animation-delay: .25s;
+          }
+          &:last-child {
+            animation-delay: 5.25s;
+          }
+        }
+      }
+      &:nth-child(3){
+        & > div{
+          &:first-child {
+            animation-delay: .5s;
+          }
+          &:last-child {
+            animation-delay: 5.5s;
+          }
+        }
+      }
+      &:nth-child(4){
+        & > div{
+          &:first-child {
+            animation-delay: .75s;
+          }
+          &:last-child {
+            animation-delay: 5.75s;
+          }
+        }
+      }
     }
   }
 }
@@ -145,8 +199,6 @@
         background-color: #111d2b;
         & > div {
           position: relative;
-          width: @container-width/4 + 50;
-          margin-right: @container-width/4 - 50;
           float: right;
           height: 300px;
           .logo {
@@ -165,8 +217,6 @@
         background-color: #2e2e2e;
         & > div {
           position: relative;
-          width: @container-width / 4 * 3 - 50;
-          margin-left: -@container-width/4 + 50;
           background-color: #2e2e2e;
           height: 300px;
         }
@@ -435,6 +485,7 @@
       }
     }
   }
+
 }
 
 body {