From 2cd95c88b5e1237abe3dfea1dfc53b04cb18abb8 Mon Sep 17 00:00:00 2001
From: Frost-ZX <30585462+Frost-ZX@users.noreply.github.com>
Date: Tue, 29 Oct 2019 21:30:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E8=BF=87=20div=20=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/css/style.css | 25 ++++++++++++++++++-------
 docs/css/tool.css  | 44 ++++++++++++++++++++++++++++++++++----------
 docs/index.html    |  2 ++
 docs/tool.html     |  2 ++
 4 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/docs/css/style.css b/docs/css/style.css
index 45af22b..29d7651 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -24,12 +24,7 @@ html {
 }
 
 body {
-    background-attachment: fixed;
-    background-color: #F9F9F9;
-    background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
+    background-color: #999;
     color: #000;
     cursor: default;
     display: flex;
@@ -216,6 +211,22 @@ footer p {
     width: 1.5em;
 }
 
+/* 背景 */
+
+.page-background {
+    z-index: -100;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-attachment: fixed;
+    background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
 /* 滚动条 */
 
 ::-webkit-scrollbar {
@@ -243,7 +254,7 @@ footer p {
     left: 0;
     bottom: -110%;
     opacity: 0;
-    transition: all 1.0s;
+    transition: all 0.5s;
 }
 
 .tool-panel-bar {
diff --git a/docs/css/tool.css b/docs/css/tool.css
index 4faefbf..b9f10f4 100644
--- a/docs/css/tool.css
+++ b/docs/css/tool.css
@@ -9,13 +9,24 @@ html {
 }
 body {
     padding: 20px 0 50px 0;
+    background-color: #999;
+    scroll-behavior: smooth;
+}
+
+/* 背景 */
+
+.page-background {
+    z-index: -100;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
     background-attachment: fixed;
-    background-color: #F9F9F9;
     background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    scroll-behavior: smooth;
 }
 
 /* 滚动条 */
@@ -256,12 +267,25 @@ body {
     transition: all 0.5s;
 }
 .to-top:hover {
-    right: 25px;
-    bottom: 25px;
-    height: 40px;
-    width: 40px;
-    line-height: 40px;
-    font-size: 20px;
-    color: #FFF;
-    transform: rotate(360deg);
+    animation: ToTopAnimation 0.5s ease-in-out;
+}
+
+/* 动画 */
+
+@keyframes ToTopAnimation {
+    0% {
+    }
+    50% {
+        right: 25px;
+        bottom: 25px;
+        height: 40px;
+        width: 40px;
+        line-height: 40px;
+        font-size: 20px;
+        color: #FFF;
+    }
+    100% {
+        color: #2196F3;
+        transform: rotate(360deg);
+    }
 }
diff --git a/docs/index.html b/docs/index.html
index df2c5ee..de0a962 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1312,6 +1312,8 @@
             on <a href="https://unsplash.com/">Unsplash</a>
         </p>
     </footer>
+    <!-- 背景 -->
+    <div class="page-background"></div>
     <!-- JavaScript -->
     <script src="js/jquery-3.2.1.min.js"></script>
     <script src="js/slinky.min.js"></script>
diff --git a/docs/tool.html b/docs/tool.html
index f5cb4e9..663cb5a 100644
--- a/docs/tool.html
+++ b/docs/tool.html
@@ -160,6 +160,8 @@
     </div>
     <!-- 返回顶部 -->
     <div class="to-top" onclick="document.body.scrollTop = 0; document.documentElement.scrollTop = 0;">▲</div>
+    <!-- 背景 -->
+    <div class="page-background"></div>
     <!-- JavaScript -->
     <script src="js/tool.min.js"></script>
 </body>