diff --git a/index.html b/index.html
index 450c4cd2..ebba45de 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,32 @@
     <link type='text/css' href='styles.css' rel='stylesheet'>
 </head>
 <body>
+    <div id='startImageBackgroundDiv'>
+        <div id='startImageDiv'></div>
+        <img id='startImageLogo' />
+    </div>
+</div>
+<script>
+    (function () {
+        var startImageBackgroundDiv = document.getElementById('startImageBackgroundDiv');
+        var startImageLogo = document.getElementById('startImageLogo');
+        var startImageDiv = document.getElementById('startImageDiv');
+        startImageLogo.onload = function () {
+            startImageBackgroundDiv.style.display = 'block';
+            var onAnimationEnd = function () {
+                startImageBackgroundDiv.style.display = 'none';
+                startImageLogo.classList.remove("startImageAnimation");
+                startImageDiv.classList.remove("startImageDivAnimation");
+            }
+            startImageDiv.addEventListener("webkitAnimationEnd", onAnimationEnd);
+            startImageDiv.addEventListener("animationend", onAnimationEnd);
+            startImageLogo.classList.add("startImageAnimation");
+            startImageDiv.classList.add("startImageDivAnimation");
+        }
+        startImageLogo.onerror = function () {}
+        startImageLogo.src = "logo.png";
+    })();
+</script>
 <div id='gameGroup'>
     <p id='mainTips'>请稍后...</p>
     <img id='musicBtn'>
diff --git a/logo.png b/logo.png
new file mode 100644
index 00000000..e1607d65
Binary files /dev/null and b/logo.png differ
diff --git a/styles.css b/styles.css
index 40d329e4..9fe80446 100644
--- a/styles.css
+++ b/styles.css
@@ -422,4 +422,62 @@ p#name {
     100% {
         transform: rotate(45deg) translate(-3px, -3px);
     }
-}
\ No newline at end of file
+}
+
+#startImageBackgroundDiv {
+    display: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 10000;
+}
+
+#startImageDiv {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    background: black;
+    opacity: 1;
+}
+
+#startImageLogo {
+    opacity: 0;
+    max-width: 60%;
+    max-height: 60%;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.startImageAnimation {
+    -webkit-animation: startImage 4s ease-in-out 1s alternate 1;
+    animation: startImage 4s ease-in-out 1s alternate 1;
+}
+
+@-webkit-keyframes startImage {
+    0% { opacity: 0; }
+    60% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+@keyframes startImage {
+    0% { opacity: 0; }
+    60% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+.startImageDivAnimation {
+    -webkit-animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
+    animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
+}
+
+@-webkit-keyframes startImageDivDisappear {
+    0% { opacity: 1 }
+    100% { opacity: 0 }
+}
+
+@keyframes startImageDivDisappear {
+    0% { opacity: 1 }
+    100% { opacity: 0 }
+}
