dos

Public/static/css/index.css

@@ -102,6 +102,10 @@ body {
   -webkit-animation: point 1.5s linear infinite;
 }
 
+.hd {
+  background: rgba(0, 0, 0, 0.8);
+}
+
 .cloud {
   animation: cloud 5s linear infinite;
   -webkit-animation: cloud 5s linear infinite;
@@ -153,7 +157,11 @@ canvas {
   -webkit-animation: luo 8s 5s ease infinite;
 }
 
-
+.rule-page,
+.intro-page {
+  position: fixed;
+  z-index: 10;
+}
 
 .page1 .light {
   animation: point 2s linear infinite;

Public/static/js/common.js

@@ -126,12 +126,32 @@ $(document).ready(function () {
 
     $('.result').on('click', showResult)
     $('.btn-retry').on('click', retry)
+    $('.home-page .btn-rule').on('click', showRule)
+    $('.home-page .btn-intro').on('click', showIntro)
+    $('.rule-page .btn-close-rule').on('click', hideRule)
+    $('.intro-page .btn-close-intro').on('click', hideIntro)
     // $('.page').on('click', function () {
     //     var audio = document.getElementById('music');
     //     audio.play();
     // })
 });
 
+function hideIntro() {
+    $('.intro-page').hide();
+}
+
+function hideRule() {
+    $('.rule-page').hide();
+}
+
+function showRule() {
+    $('.rule-page').show();
+}
+
+function showIntro() {
+    $('.intro-page').show();
+}
+
 // function audioAutoPlay(id) {
 //     var audio = document.getElementById(id);
 //     if (window.WeixinJSBridge) {