Update index.html

awaidea · Dec 21, 2024 · 8cce471 · 8cce471
1 parent 8c2edf2
commit 8cce471
Showing 1 changed file with 43 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -59,12 +59,53 @@
                 background-size: cover;
             }
         }
+
+        /* 加载动画样式 */
+       .loader {
+            border: 16px solid #f3f3f3; /* 加载动画的浅色边框 */
+            border-top: 16px solid #3498db; /* 加载动画的顶部深色边框，形成旋转效果 */
+            border-radius: 50%;
+            width: 120px;
+            height: 120px;
+            animation: spin 2s linear infinite; /* 应用名为spin的动画，2秒完成一次，线性，无限循环 */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -60px;
+            margin-left: -60px;
+            z-index: 9999; /* 确保加载动画在其他元素之上显示 */
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg); /* 初始状态不旋转 */
+            }
+
+            100% {
+                transform: rotate(360deg); /* 旋转360度，完成一圈旋转 */
+            }
+        }
+
+        /* 初始隐藏页面内容，只显示加载动画 */
+       .page-content {
+            display: none;
+        }
     </style>
 </head>
 
 <body>
-    <h1>欢迎来到留言板</h1>
-    <div id="giscus-container"></div>
+    <div class="loader"></div> <!-- 加载动画元素 -->
+    <div class="page-content"> <!-- 包裹页面实际内容的容器 -->
+        <h1>欢迎来到留言板</h1>
+        <div id="giscus-container"></div>
+    </div>
+    <script>
+        window.onload = function () {
+            // 页面加载完成后，隐藏加载动画，显示页面内容
+            document.querySelector('.loader').style.display = 'none';
+            document.querySelector('.page-content').style.display = 'block';
+        };
+    </script>
     <script src="https://giscus.app/client.js"
             data-repo="awaidea/blog-1"
             data-repo-id="R_kgDONTjesg"