diff --git a/static/css/base.css b/static/css/base.css
index 0d4854a7fb3293c1f170d10b24b68aab046a0294..317e19436fcfc6c8f3aa99d09aa2ec8a01a70368 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -72,3 +72,76 @@ iframe {
     border: 0;
 
 }
+
+
+div.background{
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden; 
+	background:linear-gradient(to bottom,#a6fff3,#b3fff5);
+	background-size:200% 200%;
+	animation:bjmove 30s infinite linear;
+    z-index: 999;
+}
+@keyframes bjmove{ /*èƒŒæ™¯ç§»åŠ¨åŠ¨ç”»*/
+	from {background-position: 0 200% ;}
+	to {background-position:0 0;}
+}
+ 
+.li-cir{
+	list-style:none; /*åŽ»é™¤ul liçš„é»˜è®¤æ ·å¼*/
+	width:30px;
+	height:30px;
+	border-radius:50%;
+	position: absolute;
+    bottom:-160px;
+	animation: ppmove 15s infinite;
+}
+@keyframes ppmove { /*æ³¡æ³¡ç§»åŠ¨åŠ¨ç”»*/
+  0% {
+    opacity: 0.5;
+    transform: translateY(0px)  }
+  25% {
+    opacity: 0.8;
+    transform: translateY(-400px) }
+  50% {
+    opacity: 1; 
+    transform: translateY(-600px) }
+  100% {
+    opacity: 1; 
+    transform: translateY(-1000px) } 
+}
+
+.animbox {
+    margin: 45vh auto;
+    width: 200px;
+    text-align: center;
+}
+/*è®¾ç½®å„ç«–æ¡çš„å…±æœ‰æ ·å¼*/
+.animbox > div {
+    background-color: #279fcf;
+    width: 8px;
+    height: 100px;
+    border-radius: 5px;
+    margin: 2px;
+    animation-fill-mode: both;
+    display: inline-block;
+    animation: anim 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
+}
+/*è®¾ç½®åŠ¨ç”»å»¶è¿Ÿ*/
+.animbox > :nth-child(2), .animbox > :nth-child(4) {
+    animation-delay: 0.25s !important;
+}
+
+.animbox > :nth-child(1), .animbox > :nth-child(5) {
+    animation-delay: 0.5s !important;
+}
+/*å®šä¹‰åŠ¨ç”»*/
+@keyframes anim {
+    0% {  transform: scaley(1); }
+    80% {  transform: scaley(0.3); }
+    90% {  transform: scaley(1);   }
+}
diff --git a/static/js/nav.js b/static/js/nav.js
index 3d2efef73a8efbe76723354d99fd38e78abd5fc0..8412704429f183449253cd11354320cb8de09bda 100644
--- a/static/js/nav.js
+++ b/static/js/nav.js
@@ -15,5 +15,7 @@ for (var i = 0; i < navList.length; i++) {
 }
 
 window.onload = function () {
-    $('.loadpic').css('display', 'none');
+    $('.background').css('background', 'rgba(255, 255, 255, 0.003)');
+    $('.background').css('z-index', '0');
+    $('.animbox').css('display', 'none');
 }
\ No newline at end of file
diff --git a/static/js/pao.js b/static/js/pao.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef02426fc55356dc6e031687380f6d5037fd6363
--- /dev/null
+++ b/static/js/pao.js
@@ -0,0 +1,22 @@
+$(document).ready(function(){
+	
+	for(var i=0; i<9; i++){
+		var rand = new Array();//rgbè‰²å½©å€¼
+		for(var j=0; j<3; j++){
+			rand[j] = Math.floor(Math.random() * 26 + 230); // 230 ~ 255
+		}
+		var  op = Math.floor(Math.random()* 5 + 2) / 10; //å‡è¡¡èŽ·å–rgbaçš„é€æ˜Žåº¦çš„éšæœºæ•°
+		var left = Math.floor(Math.random()* 100 )+"%"; //æ³¡æ³¡éšæœºåˆ†å¸ƒçš„è·ç¦»
+		var delay = Math.floor(Math.random()* 10)+"s"; //æ¯ä¸ªæ³¡æ³¡å‡ºçŽ°æŽ¨è¿Ÿçš„æ—¶é—´
+		var dur = Math.floor(Math.random()* 10 + 11)+"s"; //æ³¡æ³¡å®Œæˆä¸€ä¸ªå‘¨æœŸæ‰€éœ€è¦çš„æ—¶é—´
+		var enlarge = Math.floor(Math.random()* 40 + 70); //æ³¡æ³¡æ‰©å¤§åˆ°çš„å®½å’Œé«˜
+		
+		$("#ul-cir").append("<li class='li-cir'></li>"); //å¢žåŠ ä¸€ä¸ªæ³¡æ³¡
+		$("#ul-cir li").eq(i).css("background","rgba("+rand[0]+","+rand[1]+","+rand[2]+","+op+")");//é€‰å–ul liä¸åŒ¹é…çš„ç´¢å¼•é¡ºåºä¸ºiçš„å…ƒç´ èµ‹äºˆèƒŒæ™¯é¢œè‰²
+		$("#ul-cir li").eq(i).css("border","rgba("+rand[0]+","+rand[1]+","+rand[2]+","+1+") 1px solid");//ç»™æ³¡æ³¡åŠ ä¸Šè¾¹æ¡†
+		$("#ul-cir li").eq(i).css("left",left); //æ³¡æ³¡å‡ºçŽ°çš„è·ç¦»å€¼
+		$("#ul-cir li").eq(i).css("animation-delay",delay); //æ³¡æ³¡å‡ºçŽ°æŽ¨è¿Ÿçš„æ—¶é—´
+		$("#ul-cir li").eq(i).css("animation-duration",dur); //æ³¡æ³¡å®Œæˆä¸€ä¸ªå‘¨æœŸæ‰€éœ€è¦çš„æ—¶é—´
+		$("#ul-cir li").eq(i).css("width",enlarge).css("height",enlarge); //æ‰©å¤§æ³¡æ³¡
+	}
+});
\ No newline at end of file
diff --git a/wiki/layout.html b/wiki/layout.html
index e717ee54172d8ad2f2d16a55955da5168b372f6a..4e75f5805d714f2f3e1a43deb178457eca44b7ff 100644
--- a/wiki/layout.html
+++ b/wiki/layout.html
@@ -27,9 +27,14 @@
 
 <body>
   <!-- loading -->
-  <div class="loadpic">
-    <div class="spinner-border text-warning"></div>
-    <div class="spinner-grow text-info"></div>
+    <div class="background"> <ul id="ul-cir"></ul> 
+      <div class="animbox">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
   </div>
   <!-- Navigation -->
   {% include 'menu.html' %}
@@ -65,6 +70,7 @@
   <script src="{{ url_for('static',filename='js/title-list.js') }}"></script>
   <script src="{{ url_for('static',filename='js/pic-link.js') }}"></script>
   <script src="{{ url_for('static',filename='js/animate.js') }}"></script>
+  <script src="{{ url_for('static',filename='js/pao.js') }}"></script>
 </body>
 
 </html>
\ No newline at end of file