添加svg动效

css/svg.css

@@ -0,0 +1,14 @@
+/* PC端设置 */
+#tanChiShe {
+    width: clamp(100px, 40vw, 600px); 
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+    #tanChiShe {
+        width: clamp(100px, 80vw, 600px);
+    }
+}

index.html

@@ -4,17 +4,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>DreamLife|HomePage</title>
-    <link rel="stylesheet" href="homepage/css/footer.css">
+    <link rel="stylesheet" href="css/footer.css">
-    <link rel="stylesheet" href="homepage/css/body.css">
+    <link rel="stylesheet" href="css/body.css">
-    <link rel="stylesheet" href="homepage/css/chat.css">
+    <link rel="stylesheet" href="css/chat.css">
-    <link rel="stylesheet" href="homepage/css/font.css">
+    <link rel="stylesheet" href="css/font.css">
-    <link rel="stylesheet" href="homepage/css/time.css">
+    <link rel="stylesheet" href="css/time.css">
-    <link rel="stylesheet" href="homepage/css/max_width.css">
+    <link rel="stylesheet" href="css/max_width.css">
+    <link rel="stylesheet" href="css/svg.css">
 </head>
 
 <body>
     <button id="fullscreen-button" class="fullscreen-btn">
-        <span class="icon"><img src="homepage/icon/full.png" width="30px"></span>
+        <span class="icon"><img src="icon/full.png" width="30px"></span>
     </button>
 
     <div class="main-layout">
@@ -41,7 +42,7 @@
                 <div id="dateDisplay" class="date">加载中...</div>
             </div>
             <div class="future-content">
-                <p>此处预留未来内容</p>
+                <img id="tanChiShe" src="svg/snake-Light.svg" alt="">
             </div>
         </div>
     </div>
@@ -70,14 +71,14 @@
         <p><img src="icon/beian.png" width="12" style="margin-right: 4px;"><a href="https://beian.mps.gov.cn/#/query/webSearch?code=12011402001636" rel="noreferrer" target="_blank" style="color: #fff; text-decoration: none;">津公网安备12011402001636号</a></p>
     </footer>
 
-    <script src="homepage/javascape/time.js"></script>
+    <script src="javascape/time.js"></script>
-    <script src="homepage/javascape/ai_api.js"></script>
+    <script src="javascape/ai_api.js"></script>
-    <script src="homepage/javascape/chat.js"></script>
+    <script src="javascape/chat.js"></script>
-    <script src="homepage/javascape/max_width.js"></script>
+    <script src="javascape/max_width.js"></script>
-    <script src="homepage/javascape/marked.min.js"></script>
+    <script src="javascape/marked.min.js"></script>
-    <script src="homepage/javascape/purify.min.js"></script>
+    <script src="javascape/purify.min.js"></script>
-    <script src="homepage/javascape/full_button.js"></script>
+    <script src="javascape/full_button.js"></script>
-    <script src="homepage/javascape/switch_interface.js"></script>
+    <script src="javascape/switch_interface.js"></script>
 
 </body>
 </html>

svg/snake-Light.svg

@@ -0,0 +1 @@
+<svg viewBox="-16 -32 880 192" width="880" height="192" xmlns="http://www.w3.org/2000/svg"><desc>Generated with https://github.com/Platane/snk</desc><style>:root{--cb:#1b1f230a;--cs:purple;--ce:#ebedf0;--c0:#ebedf0;--c1:#9be9a8;--c2:#40c463;--c3:#30a14e;--c4:#216e39}.c{shape-rendering:geometricPrecision;fill:var(--ce);stroke-width:1px;stroke:var(--cb);animation:none 59300ms linear infinite;width:12px;height:12px}@keyframes c0{0.16%{fill:var(--c1)}0.18%,100%{fill:var(--ce)}}.c.c0{fill:var(--c1);animation-name:c0}@keyframes c1{42.15%{fill:var(--c1)}42.17%,100%{fill:var(--ce)}}.c.c1{fill:var(--c1);animation-name:c1}@keyframes c2{41.81%{fill:var(--c1)}41.83%,100%{fill:var(--ce)}}.c.c2{fill:var(--c1);animation-name:c2}@keyframes c3{0.5%{fill:var(--c1)}0.52%,100%{fill:var(--ce)}}.c.c3{fill:var(--c1);animation-name:c3}@keyframes c4{1%{fill:var(--c1)}1.02%,100%{fill:var(--ce)}}.c.c4{fill:var(--c1);animation-name:c4}@keyframes c5{1.17%{fill:var(--c1)}1.19%,100%{fill:var(--ce)}}.c.c5{fill:var(--c1);animation-name:c5}@keyframes c6{41.47%{fill:var(--c1)}41.49%,100%{fill:var(--ce)}}.c.c6{fill:var(--c1);animation-name:c6}@keyframes c7{41.64%{fill:var(--c1)}41.66%,100%{fill:var(--ce)}}.c.c7{fill:var(--c1);animation-name:c7}@keyframes c8{42.82%{fill:var(--c1)}42.84%,100%{fill:var(--ce)}}.c.c8{fill:var(--c1);animation-name:c8}@keyframes c9{0.66%{fill:var(--c1)}0.68%,100%{fill:var(--ce)}}.c.c9{fill:var(--c1);animation-name:c9}@keyframes ca{1.34%{fill:var(--c1)}1.36%,100%{fill:var(--ce)}}.c.ca{fill:var(--c1);animation-name:ca}@keyframes cb{41.14%{fill:var(--c1)}41.16%,100%{fill:var(--ce)}}.c.cb{fill:var(--c1);animation-name:cb}@keyframes cc{42.99%{fill:var(--c1)}43.01%,100%{fill:var(--ce)}}.c.cc{fill:var(--c1);animation-name:cc}@keyframes cd{43.16%{fill:var(--c1)}43.18%,100%{fill:var(--ce)}}.c.cd{fill:var(--c1);animation-name:cd}@keyframes ce{67.61%{fill:var(--c2)}67.63%,100%{fill:var(--ce)}}.c.ce{fill:var(--c2);animation-name:ce}@keyframes cf{1.51%{fill:var(--c1)}1.53%,100%{fill:var(--ce)}}.c.cf{fill:var(--c1);animation-name:cf}@keyframes cg{84.31%{fill:var(--c3)}84.33%,100%{fill:var(--ce)}}.c.cg{fill:var(--c3);animation-name:cg}@keyframes ch{40.97%{fill:var(--c1)}40.99%,100%{fill:var(--ce)}}.c.ch{fill:var(--c1);animation-name:ch}@keyframes ci{43.33%{fill:var(--c1)}43.35%,100%{fill:var(--ce)}}.c.ci{fill:var(--c1);animation-name:ci}@keyframes cj{44.51%{fill:var(--c1)}44.53%,100%{fill:var(--ce)}}.c.cj{fill:var(--c1);animation-name:cj}@keyframes ck{1.68%{fill:var(--c1)}1.7%,100%{fill:var(--ce)}}.c.ck{fill:var(--c1);animation-name:ck}@keyframes cl{44.68%{fill:var(--c1)}44.7%,100%{fill:var(--ce)}}.c.cl{fill:var(--c1);animation-name:cl}@keyframes cm{2.01%{fill:var(--c1)}2.03%,100%{fill:var(--ce)}}.c.cm{fill:var(--c1);animation-name:cm}@keyframes cn{64.07%{fill:var(--c2)}64.09%,100%{fill:var(--ce)}}.c.cn{fill:var(--c2);animation-name:cn}@keyframes co{39.96%{fill:var(--c1)}39.98%,100%{fill:var(--ce)}}.c.co{fill:var(--c1);animation-name:co}@keyframes cp{40.12%{fill:var(--c1)}40.14%,100%{fill:var(--ce)}}.c.cp{fill:var(--c1);animation-name:cp}@keyframes cq{2.18%{fill:var(--c1)}2.2%,100%{fill:var(--ce)}}.c.cq{fill:var(--c1);animation-name:cq}@keyframes cr{2.52%{fill:var(--c1)}2.54%,100%{fill:var(--ce)}}.c.cr{fill:var(--c1);animation-name:cr}@keyframes cs{39.79%{fill:var(--c1)}39.81%,100%{fill:var(--ce)}}.c.cs{fill:var(--c1);animation-name:cs}@keyframes ct{40.29%{fill:var(--c1)}40.31%,100%{fill:var(--ce)}}.c.ct{fill:var(--c1);animation-name:ct}@keyframes cu{66.09%{fill:var(--c2)}66.11%,100%{fill:var(--ce)}}.c.cu{fill:var(--c2);animation-name:cu}@keyframes cv{85.49%{fill:var(--c3)}85.51%,100%{fill:var(--ce)}}.c.cv{fill:var(--c3);animation-name:cv}@keyframes cw{63.4%{fill:var(--c2)}63.42%,100%{fill:var(--ce)}}.c.cw{fill:var(--c2);animation-name:cw}@keyframes cx{96.62%{fill:var(--c4)}96.64%,100%{fill:var(--ce)}}.c.cx{fill:var(--c4);animation-name:cx}@keyframes cy{2.69%{fill:var(--c1)}2.71%,100%{fill:var(--ce)}}.c.cy{fill:var(--c1);animation-name:cy}@keyframes cz{83.46%{fill:var(--c3)}83.48%,100%{fill:var(--ce)}}.c.cz{fill:var(--c3);animation-name:cz}@keyframes c10{64.75%{fill:var(--c2)}64.77%,100%{fill:var(--ce)}}.c.c10{fill:var(--c2);animation-name:c10}@keyframes c11{83.13%{fill:var(--c3)}83.15%,100%{fill:var(--ce)}}.c.c11{fill:var(--c3);animation-name:c11}@keyframes c12{49.23%{fill:var(--c1)}49.25%,100%{fill:var(--ce)}}.c.c12{fill:var(--c1);animation-name:c12}@keyframes c13{63.23%{fill:var(--c2)}63.25%,100%{fill:var(--ce)}}.c.c13{fill:var(--c2);animation-name:c13}@keyframes c14{39.11%{fill:var(--c1)}39.13%,100%{fill:var(--ce)}}.c.c14{fill:var(--c1);animation-name:c14}@keyframes c15{2.86%{fill:var(--c1)}2.88%,100%{fill:var(--ce)}}.c.c15{fill:var(--c1);animation-name:c15}@keyframes c16{45.86%{fill:var(--c1)}45.88%,100%{fill:var(--ce)}}.c.c16{fill:var(--c1);animation-name:c16}@keyframes c17{46.03%{fill:var(--c2)}46.05%,100%{fill:var(--ce)}}.c.c17{fill:var(--c2);animation-name:c17}@keyframes c18{82.96%{fill:var(--c3)}82.98%,100%{fill:var(--cLine truncated