新增效果

Static/Gui/js/new_Rss.js

@@ -0,0 +1,44 @@
+//定义一个函数来获取rss文件
+function getRSS(url) {
+    //使用fetch API来调用url
+    fetch(url)
+      .then(response => response.text()) //将响应解析为文本
+      .then(str => new window.DOMParser().parseFromString(str, "text/xml")) //将文本解析为XML对象
+      .then(data => {
+        //从XML对象中获取channel元素
+        const channel = data.querySelector("channel");
+        //从channel元素中获取所有item元素
+        const items = channel.querySelectorAll("item");
+        //遍历每个item元素
+        items.forEach(item => {
+          //从item元素中获取title和link元素的文本内容
+          const title = item.querySelector("title").textContent;
+          const link = item.querySelector("link").textContent;
+          const datetime = item.querySelector("pubDate").textContent;
+          //在控制台打印标题和链接
+          console.log(title, link);
+          //在news.html页面上的ul元素中添加内容
+            document.querySelector("ul").innerHTML += `
+            <a href="${link}" target="_blank">
+            <li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                <div class="mdui-list-item-title">${title}</div>
+                            <div class="mdui-list-item-text mdui-list-item-one-line">
+                                <span>${datetime}</span>
+                     </div>
+                </a>
+            </li>
+            `;
+          //若是没有更多的item元素，则在页面添加没有内容”
+          if (items.length === 0) {
+            document.querySelector("ul").innerHTML += `
+            <li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                <div class="mdui-list-item-title">没有内容</div>
+            </li>
+            `;
+          }
+        });
+      });
+  }
+  
+  //调用函数，传入rss文件的url（这里是一个示例）
+  getRSS("http://www.mikumo.top/?feed=rss2");

Static/mdui-v1.0.1/css/ui.css

@@ -1,6 +1,12 @@
+/* 去除左右滚动 */
 body{
-    overflow-x:hidden;
+    overflow-x:hidden!important;
 }
+/* a标签去除下划线 */
+a{
+    text-decoration:none!important;
+}
+
 /* loading start */
 #loading {
 	position: fixed;
@@ -9,7 +15,7 @@ body{
 	left: 0;
 	right: 0;
 	z-index: 10000;
-	background-color: #242222;
+	background-color: #4d4a4a;
 	display: -webkit-flex;
 	display: -moz-flex;
 	display: -ms-flex;
@@ -18,14 +24,10 @@ body{
 	justify-content: center;
 	align-items: center;
 }
-#loading span {
-	width: 100px;
-	height: 100px;
-	border-radius: 50%;
-	border: 10px solid #777777;
-	border-top-color: #fff;
+#loading span img {
+	width: 100%;
+	height: 100%;
 	position: relative;
-	animation: loadingA 1s linear infinite;
 }
 @keyframes loadingA {
 	from {}

Static/mdui-v1.0.1/js/wow_init.js

@@ -0,0 +1,15 @@
+wow = new WOW({
+  boxClass: 'wow',
+  // 当用户滚动时显示隐藏框的类名称
+  animateClass: 'animate__animated',
+  // 触发 CSS 动画的类名称（动画库默认为"animate.css"库）
+  offset: 0,
+  // 定义浏览器视口底部与隐藏框顶部之间的距离。
+  // 当用户滚动并到达此距离时，将显示隐藏的框。
+  mobile: false,
+  // 在移动设备上打开/关闭wow.js。
+  // 经测试此项配置无效。
+  live: true
+  // 在页面上检查新的 wow.js元素。
+})
+wow.init();