From 04f4acb3d15bbaa595340a48bf4f4f9b58acb02f Mon Sep 17 00:00:00 2001
From: BugKing <wangzhen@fit2cloud.com>
Date: Thu, 7 Dec 2023 14:47:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E5=85=AC=E5=91=8A?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E5=A2=9E=E5=8A=A0=E6=89=93=E5=AD=97=E6=9C=BA?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=20(#15)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/style.scss      |  1 +
 src/styles/typed-text.scss | 14 ++++++++++++++
 templates/index.html       | 24 ++++++++++++++++++++++--
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/typed-text.scss

diff --git a/src/styles/style.scss b/src/styles/style.scss
index acf5f05..dd57a6a 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -5,3 +5,4 @@
 @import 'post';
 @import 'pagination';
 @import 'footer';
+@import 'typed-text';
diff --git a/src/styles/typed-text.scss b/src/styles/typed-text.scss
new file mode 100644
index 0000000..9098d22
--- /dev/null
+++ b/src/styles/typed-text.scss
@@ -0,0 +1,14 @@
+/* 光标样式 */
+.typed-text::after {
+content: '|';
+display: inline-block;
+opacity: 0;
+animation: blink 0.7s infinite alternate; /* 闪烁动画 */
+}
+
+/* 闪烁动画 */
+@keyframes blink {
+to {
+    opacity: 1;
+}
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 182e1c0..9b08d59 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,8 +6,8 @@
   <th:block th:fragment="content">
     <div class="content">
       <div class="index-content framed">
-        <h1 th:text="${theme.config.basic.index_notice_title}"></h1>
-        <p th:utext="${theme.config.basic.index_notice_content}"></p>
+        <h1 class="typed-text" th:text="${theme.config.basic.index_notice_title}"></h1>
+        <div th:utext="${theme.config.basic.index_notice_content}"></div>
       </div>
       <div class="posts">
         <div class="post on-list" th:each="post : ${posts.items}">
@@ -58,5 +58,25 @@ <h1 class="post-title">
         </div>
       </div>
     </div>
+    <script>
+      // 获取容器
+      const typedTextContainer = document.querySelector('.typed-text');
+  
+      // 打字机效果的实现
+      function typeWriter(container) {
+        text = container.innerText;
+        container.innerText = '';
+        let i = 0;
+        function type() {
+          if (i < text.length) {
+            container.innerHTML += text.charAt(i);
+            i++;
+            setTimeout(type, Math.random() * 200 + 50);
+          }
+        }
+        type();
+      }
+      typeWriter(typedTextContainer);
+    </script>
   </th:block>
 </html>