v1.4 & fix cdn & fix ico

css/font.css

@@ -1,10 +1,3 @@
-@font-face {
-    font-family: "iconfont";
-    src: url('../font/font_2831425_80aedhvquju.woff2') format('woff2'),
-        url('../font/font_2831425_80aedhvquju.woff') format('woff'),
-        url('../font/font_2831425_80aedhvquju.ttf') format('truetype');
-}
-
 @font-face {
     font-family: "Pacifico-Regular";
     src: url('../font/Pacifico-Regular.ttf');
@@ -15,6 +8,19 @@
     src: url('../font/UnidreamLED.ttf');
 }
 
+@font-face {
+    font-family: "PingFangSC";
+    src: url('../font/PingFangSC.woff2');
+}
+
+@font-face {
+    font-family: "iconfont";
+    /* Project id 2831425 */
+    src: url('../font/font_2831425_ekwvaabvo8l.woff2') format('woff2'),
+        url('../font/font_2831425_ekwvaabvo8l.woff') format('woff'),
+        url('../font/font_2831425_ekwvaabvo8l.ttf') format('truetype');
+}
+
 .iconfont {
     font-family: "iconfont" !important;
     font-size: 16px;
@@ -23,6 +29,70 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-undo:before {
+    content: "\e875";
+}
+
+.icon-wrench-fill:before {
+    content: "\e86e";
+}
+
+.icon-plus:before {
+    content: "\e653";
+}
+
+.icon-right:before {
+    content: "\e613";
+}
+
+.icon-right-copy:before {
+    content: "\ebd4";
+}
+
+.icon-times:before {
+    content: "\e857";
+}
+
+.icon-bars:before {
+    content: "\e61f";
+}
+
+.icon-link:before {
+    content: "\e603";
+}
+
+.icon-close:before {
+    content: "\e656";
+}
+
+.icon-photo:before {
+    content: "\ebd3";
+}
+
+.icon-navigation1:before {
+    content: "\e637";
+}
+
+.icon-cloud:before {
+    content: "\e624";
+}
+
+.icon-lab:before {
+    content: "\e88d";
+}
+
+.icon-blog-solid:before {
+    content: "\e631";
+}
+
+.icon-comment-alt-lines:before {
+    content: "\e679";
+}
+
+.icon-music-list:before {
+    content: "\e699";
+}
+
 .icon-youxiang:before {
     content: "\e605";
 }

css/lantern.css

@@ -221,3 +221,9 @@
         height: 16px
     }
 }
+
+@media screen and (max-width:720px) {
+    .lantern__warpper {
+        display: none;
+    }
+}

css/mobile.css

@@ -50,6 +50,16 @@
     span.img-text {
         font-size: 1.75rem;
     }
+
+    /*链接卡片文字*/
+    span.link-name {
+        display: none !important;
+    }
+
+    .link-card i {
+        margin-left: 10px !important;
+        margin-right: 10px !important;
+    }
 }
 
 /*小于840px时*/
@@ -123,6 +133,17 @@
     }
     */
 
+    /*链接卡片*/
+    .link-card {
+        align-items: center !important;
+        flex-direction: column !important;
+        justify-content: center !important;
+    }
+
+    span.link-name {
+        display: block !important;
+    }
+
     /*菜单栏按钮*/
     .menu {
         display: flex;
@@ -169,6 +190,7 @@
 
 /* 大于992px时 */
 @media (min-width: 992px) {
+
     /*时钟显示*/
     span#win_text,
     span#win_speed {
@@ -178,6 +200,7 @@
 
 /* 大于1400px时 */
 @media (min-width: 1400px) {
+
     /*时钟显示*/
     span#win_text,
     span#win_speed {
@@ -222,10 +245,14 @@
     text-align: center;
     position: fixed;
     top: 8%;
-    font-family: 'Pacifico-Regular';
     font-size: 1.75rem;
 }
 
+/*第二屏logo*/
+.logo-text {
+    font-family: 'Pacifico-Regular' !important;
+}
+
 /*切换动画*/
 /*
 .hitokoto,

css/style.css

@@ -16,6 +16,7 @@ p {
     transition: 0.3s;
     color: #efefef;
     user-select: none;
+    font-family: 'PingFangSC';
 }
 
 a:hover {
@@ -96,19 +97,24 @@ main {
     width: 120px;
 }
 
+.main-img img:hover {
+    transform: rotate(360deg);
+}
+
 .img-title {
     width: 100%;
     margin-left: 12px;
-    font-family: Pacifico-Regular;
     transform: translateY(-8%);
 }
 
 span.img-title {
     font-size: 5rem;
+    font-family: 'Pacifico-Regular' !important;
 }
 
 span.img-text {
     font-size: 2rem;
+    font-family: 'Pacifico-Regular' !important;
 }
 
 /*简介*/
@@ -131,7 +137,11 @@ span.img-text {
 p.des-title {
     margin: 1rem 1rem;
     line-height: 2rem;
-    font-family: Pacifico-Regular;
+    font-size: 1.10rem;
+}
+
+span#change {
+    font-family: 'Pacifico-Regular' !important;
 }
 
 i.iconfont.icon-yinhao-copy {
@@ -151,6 +161,10 @@ i.iconfont.icon-yinhao-copy {
     margin: 0px 10px;
 }
 
+.social .link i:hover {
+    color: #707070;
+}
+
 #link-text {
     display: none;
     flex: 1;
@@ -165,6 +179,10 @@ i.iconfont.icon-yinhao-copy {
     backdrop-filter: blur(10px);
     padding: 20px;
     border-radius: 6px;
+    height: 165px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
 }
 
 .hitokoto-all {
@@ -173,10 +191,15 @@ i.iconfont.icon-yinhao-copy {
     flex-direction: column;
 }
 
+.hitokoto-text {
+    font-size: 1.2rem;
+}
+
 .hitokoto-from {
     margin-top: 10px;
     font-weight: bold;
     align-self: flex-end;
+    font-size: 1.10rem;
 }
 
 /*时间卡片*/
@@ -189,21 +212,35 @@ i.iconfont.icon-yinhao-copy {
     text-align: center;
     display: flex;
     flex-direction: column;
+    height: 165px;
+    font-size: 1.10rem;
 }
 
 span.time-text {
     font-size: 3.25rem;
     letter-spacing: 2px;
-    font-family: UnidreamLED;
+    font-family: 'UnidreamLED' !important;
 }
 
-/*链接卡片*/
+/*分割线*/
 .line {
     margin: 1rem 0.25rem;
     margin-top: 2rem;
-    font-size: 1.10rem;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
 }
 
+span.line-text {
+    font-size: 1.35rem;
+    margin: 0px 6px;
+}
+
+i.iconfont.icon-link {
+    font-size: 1.4rem;
+}
+
+/*链接卡片*/
 .link-card {
     height: 100px;
     width: 100%;
@@ -212,8 +249,13 @@ span.time-text {
     backdrop-filter: blur(10px);
     display: flex;
     align-items: center;
-    flex-direction: column;
-    justify-content: space-evenly;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.link-card i {
+    margin-left: 0px;
+    font-size: 2.2rem;
 }
 
 .link-card:hover {
@@ -221,6 +263,14 @@ span.time-text {
     transition: 0.5s;
 }
 
+span.link-name {
+    font-size: 1.2rem;
+}
+
+.link-card:hover span.link-name {
+    font-size: 1.25rem;
+}
+
 /*更多页面*/
 .more {
     display: none !important;
@@ -276,7 +326,7 @@ span.time-text {
 }
 
 .progress-bar {
-    font-family: 'UnidreamLED';
+    font-family: 'UnidreamLED' !important;
     background-color: #efefef !important;
     color: rgb(86 77 89) !important;
     font-size: 0.95rem;
@@ -341,15 +391,24 @@ span.time-text {
 
 .closebox {
     left: auto;
-    top: 4px;
-    right: 8px;
-    font-size: 1.45rem;
+    top: 10px;
+    right: 16px;
 }
 
 .closebox:hover {
     transform: scale(1.2);
 }
 
+i.iconfont.icon-close {
+    font-size: 1.45rem;
+}
+
+/*移动端页面切换按钮*/
+i.iconfont.icon-bars,
+i.iconfont.icon-times {
+    font-size: 1.25rem;
+}
+
 /*页脚样式*/
 footer {
     text-align: center;

index.html

@@ -27,10 +27,8 @@
     <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
     <!-- 引入 Izitoast -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
-    <!-- 引入 Fontawesome -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
-        media="all">
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js">
+    </script>
     <!--引入 Vue
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>-->
     <!-- 引入 jQuery -->
@@ -116,7 +114,7 @@
                     </div>
                     <!--第二屏 Logo-->
                     <div class="logo cards" style="display: none" id="changemore">
-                        <a>imsyy.top</a>
+                        <a class="logo-text">imsyy.top</a>
                     </div>
                     <div class="col right">
                         <div class="main-right">
@@ -125,7 +123,7 @@
                                 <div class="col hitokotos">
                                     <!--一言-->
                                     <div class="hitokoto cards" id="hitokoto">
-                                        <div class="hitokoto-ico"><i class="fad fa-comment-alt-lines"></i>&nbsp;一言</div>
+                                        <!--<div class="hitokoto-ico"><i class="iconfont icon-comment-alt-lines"></i>&nbsp;&nbsp;一言</div>-->
                                         <div class="hitokoto-all">
                                             <div class="hitokoto-text"><span id="hitokoto_text">每一个人都应该明确自己的方向和位置</span>
                                             </div>
@@ -149,7 +147,7 @@
                             </div>
                             <!--分隔线-->
                             <div class="line">
-                                <i class="fad fa-grip-lines-vertical"></i>
+                                <i class="iconfont icon-link"></i>
                                 <span class="line-text">网站列表</span>
                             </div>
                             <!--网站链接-->
@@ -159,23 +157,23 @@
                                     <div class="col">
                                         <a href="https://blog.imsyy.top/" target="_blank">
                                             <div class="link-card cards">
-                                                <i class="fad fa-blog"></i>
+                                                <i class="iconfont icon-blog-solid"></i>
                                                 <span class="link-name">博客</span>
                                             </div>
                                         </a>
                                     </div>
                                     <div class="col 2">
-                                        <a href="https://web.imsyy.top/" target="_blank">
+                                        <a href="https://drive.imsyy.top/" target="_blank">
                                             <div class="link-card cards">
-                                                <i class="fad fa-spider-web"></i>
-                                                <span class="link-name">网址导航</span>
+                                                <i class="iconfont icon-cloud"></i>
+                                                <span class="link-name">网盘</span>
                                             </div>
                                         </a>
                                     </div>
                                     <div class="col">
                                         <a href="https://music.imsyy.top/" target="_blank">
                                             <div class="link-card cards">
-                                                <i class="fad fa-list-music"></i>
+                                                <i class="iconfont icon-music-list"></i>
                                                 <span class="link-name">音乐</span>
                                             </div>
                                         </a>
@@ -186,23 +184,23 @@
                                     <div class="col">
                                         <a href="https://lab.imsyy.top/" target="_blank">
                                             <div class="link-card cards">
-                                                <i class="fad fa-flask"></i>
+                                                <i class="iconfont icon-lab"></i>
                                                 <span class="link-name">实验室</span>
                                             </div>
                                         </a>
                                     </div>
                                     <div class="col 2">
-                                        <a href="https://drive.imsyy.top/" target="_blank">
+                                        <a href="https://web.imsyy.top/" target="_blank">
                                             <div class="link-card cards">
-                                                <i class="fad fa-cloud-download"></i>
-                                                <span class="link-name">网盘</span>
+                                                <i class="iconfont icon-navigation1"></i>
+                                                <span class="link-name">网址导航</span>
                                             </div>
                                         </a>
                                     </div>
                                     <div class="col">
                                         <a href="https://photo.imsyy.top/" target="_blank">
                                             <div class="link-card cards">
-                                                <i class="fad fa-image"></i>
+                                                <i class="iconfont icon-photo"></i>
                                                 <span class="link-name">相册</span>
                                             </div>
                                         </a>
@@ -214,18 +212,18 @@
                 </div>
                 <!--展开菜单按钮-->
                 <div class="menu" id="switchmenu">
-                    <a class="munu-button cards" id="menu"><i class="fad fa-bars"></i></a>
+                    <a class="munu-button cards" id="menu"><i class="iconfont icon-bars"></i></a>
                 </div>
                 <!--更多内容-->
-                <div class="more cards" id="more">
+                <div class="more" id="more">
                     <!--关闭按钮-->
                     <div class="close fixed-top" id="close">
-                        <i class="fad fa-times-circle"></i>
+                        <i class="iconfont icon-close"></i>
                     </div>
                     <div class="line" style="margin-top: 1rem;">
-                        <i class="fad fa-grip-lines-vertical"></i>
+                        <i class="iconfont icon-right-copy"></i>
                         <span class="line-text">时间胶囊</span>
-                        <i class="fad fa-grip-lines-vertical"></i>
+                        <i class="iconfont icon-right"></i>
                     </div>
                     <div class="date" id="date">
                         <div class="item" id="dayProgress">
@@ -254,9 +252,9 @@
                         </div>
                     </div>
                     <div class="line">
-                        <i class="fad fa-grip-lines-vertical"></i>
+                        <i class="iconfont icon-right-copy"></i>
                         <span class="line-text">杂七杂八</span>
-                        <i class="fad fa-grip-lines-vertical"></i>
+                        <i class="iconfont icon-right"></i>
                     </div>
                     <!--网站链接-->
                     <div class="row">
@@ -277,7 +275,7 @@
                         <div class="col">
                             <a href="https://write.imsyy.top/" target="_blank">
                                 <div class="link-card cards">
-                                    <span class="link-name">Markdown</span>
+                                    <span class="link-name">编辑器</span>
                                 </div>
                             </a>
                         </div>
@@ -311,22 +309,23 @@
                     <div class="box-wrapper">
                         <!--关闭按钮-->
                         <div class="closebox fixed-top" id="closemore">
-                            <i class="fad fa-times-circle"></i>
+                            <i class="iconfont icon-close"></i>
                         </div>
                         <!--更新日志-->
                         <div class="img-title">
                             <span class="img-title">imsyy</span>
                             <span class="img-text">.top</span>
-                            <span class="img-text">&nbsp;&nbsp;v&nbsp;1.3</span>
+                            <span class="img-text">&nbsp;&nbsp;v&nbsp;1.4</span>
                         </div>
                         <div class="upnote">
-                            <span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;点击左侧简介可弹出更多页面</span>
-                            <span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;修复时间胶囊（ 时光进度条 ）</span>
-                            <span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;隐藏页面新增全屏弹窗</span>
-                            <span class="uptext"><i class="fad fa-wrench"></i>&nbsp;星期进度条显示错误</span>
-                            <span class="uptext"><i class="fad fa-wrench"></i>&nbsp;移动端动画及细节</span>
-                            <span class="uptext"><i class="fad fa-wrench"></i>&nbsp;Js&nbsp;文件优化</span>
-                            <span class="uptext"><i class="fad fa-undo-alt"></i>&nbsp;<a href="./old/"
+                            <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;点击左侧简介可弹出更多页面</span>
+                            <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;修复时间胶囊（ 时光进度条 ）</span>
+                            <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;隐藏页面新增全屏弹窗</span>
+                            <span class="uptext"><i class="iconfont icon-plus"></i>&nbsp;新增动态跟随鼠标样式</span>
+                            <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span>
+                            <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span>
+                            <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标由 Fontawesome 改为 Iconfont</span>
+                            <span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a href="./old/"
                                     style="color:#efefef">返回旧版站点</a></span>
                         </div>
                     </div>

js/main.js

@@ -40,15 +40,16 @@ color: rgb(30,152,255);
 var title1 = '無名の主页'
 var title2 = 'imsyy.top'
 var content = `
-版 本 号：1.3.0
-更新日期：2021-10-02 14:26:31
+版 本 号：1.4.0
+更新日期：2022-01-12 14:38:34
 
 更新说明：
-1. 新增 点击左侧简介弹出更多页面
-2. 修复 时间胶囊（ 时光进度条 ）
-3. 优化 移动端动画及细节
-4. 优化 Js 文件优化
-5. 修复 星期进度条显示错误
+1. 新增 部分页面样式调整
+2. 新增 动态跟随鼠标样式
+3. 修复 部分控件无法点击
+4. 优化 移动端动画及细节
+5. 优化 页面加载缓慢
+6. 修复 时光胶囊显示错误
 
 主页:  https://imsyy.top
 Github:  https://github.com/imsyy/home
@@ -57,7 +58,7 @@ console.log(`%c${title1} %c${title2}
 %c${content}`, styleTitle1, styleTitle2, styleContent)
 
 //获取一言
-fetch('https://v1.hitokoto.cn')
+fetch('https://v1.hitokoto.cn?max_length=24')
     .then(response => response.json())
     .then(data => {
         const hitokoto = document.getElementById('hitokoto_text')
@@ -237,10 +238,10 @@ $('#switchmenu').on('click', function () {
     switchmenu = !switchmenu;
     if (switchmenu) {
         $('#row').attr('class', 'row menus');
-        $("#menu").html("<i class='fad fa-times'></i>");
+        $("#menu").html("<i class='iconfont icon-times'></i>");
     } else {
         $('#row').attr('class', 'row');
-        $("#menu").html("<i class='fad fa-bars'></i>");
+        $("#menu").html("<i class='iconfont icon-bars'>");
     }
 });
 
@@ -262,7 +263,7 @@ window.addEventListener('load', function () {
         //关闭移动端样式
         if (window.innerWidth >= 600) {
             $('#row').attr('class', 'row');
-            $("#menu").html("<i class='fad fa-bars'></i>");
+            $("#menu").html("<i class='iconfont icon-bars'>");
             //移除移动端切换功能区
             $('#rightone').attr('class', 'row rightone');
         }