dos

Public/static/css/index.css

@@ -116,6 +116,39 @@ body {
   -webkit-animation: updown 1s ease-in infinite;
 }
 
+.leaves {
+  position: absolute;
+  top: -100%;
+}
+
+.leaves-1 {
+  background: url('../image2/leaves-1.png') left top no-repeat;
+  width: 71px;
+  height: 68px;
+  left: 100px;
+  animation: leaves 4s linear infinite;
+  -webkit-animation: leaves 4s linear infinite;
+}
+
+.leaves-2 {
+  background: url('../image2/leaves-2.png') left top no-repeat;
+  width: 56px;
+  height: 44px;
+  left: 250px;
+  animation: leaves 4s 2s linear infinite;
+  -webkit-animation: leaves 4s 2s linear infinite;
+}
+
+.leaves-3 {
+  background: url('../image2/leaves-3.png') left top no-repeat;
+  width: 58px;
+  height: 37px;
+  left: 470px;
+  animation: leaves 4s 4s linear infinite;
+  -webkit-animation: leaves 4s 4s linear infinite;
+}
+
+
 
 .page1 .light {
   animation: point 2s linear infinite;
@@ -138,6 +171,33 @@ body {
   -webkit-animation: cloud2 5s linear infinite;
 }
 
+@keyframes leaves {
+  0% {
+    top: -100%;
+    transform: translateX(0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(50px);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(-50px);
+  }
+
+  100% {
+    top: 100%;
+    transform: translateX(0);
+  }
+}
+
 @keyframes updown {
 
   0%,

Public/static/js/common.js

@@ -311,6 +311,7 @@ function deepClone(obj) {
 
 function init() {
     inited = true;
+    $('.page6').append('<div class="leaves leaves-1"></div><div class="leaves leaves-2"></div><div class="leaves leaves-3"></div>');
     $('.page1').show();
     resizeCanvas();
     onLoad();