新增载入动画 & fix 部分边距不一致

imsyy · Jan 20, 2022 · c73da0a · c73da0a
1 parent ec133f7
commit c73da0a
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 53 deletions.
diff --git a/css/loading.css b/css/loading.css
@@ -6,7 +6,7 @@
     height: 100%;
     background-color: rgb(81 81 81 / 80%);
     transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
-    backdrop-filter: blur(40px);
+    backdrop-filter: blur(10px);
 }
 
 #loading-box .loading-right-bg {

diff --git a/css/mobile.css b/css/mobile.css
@@ -11,7 +11,7 @@
     .container-lg,
     .container-md,
     .container-sm {
-        max-width: 1100px !important;
+        max-width: 1000px !important;
     }
 
     .weekday {
@@ -27,17 +27,32 @@
 /*小于992px时*/
 @media (max-width: 992px) {
 
-    /*简介不可点击
-    .message {
-        pointer-events: none;
+    /*总布局*/
+    .container,
+    .container-lg,
+    .container-md,
+    .container-sm {
+        max-width: 900px !important;
+    }
+
+    .col.left {
+        margin-right: 0.75rem;
+    }
+
+    .col.right {
+        margin-left: 0.75rem;
     }
-    */
 
     /*一言*/
     .col.hitokotos {
         display: none;
     }
 
+    /*时间卡片*/
+    .col.times {
+        margin-left: 0rem;
+    }
+
     /*日期显示*/
     .weekday {
         display: inline;
@@ -116,11 +131,21 @@
         transform: translateY(20px);
     }
 
+    /*左侧栏边距*/
+    .col.left {
+        margin-right: 0rem;
+    }
+
     /*右侧栏隐藏*/
     .col.right {
         display: none;
     }
 
+    /*右侧栏边距*/
+    .col.right {
+        margin-left: 0rem;
+    }
+
     /*标题文字*/
     span.img-text {
         display: inline;
@@ -187,6 +212,11 @@
         font-size: 0.85rem;
     }
 
+    /*一言边距*/
+    .col.hitokotos {
+        margin-right: 0rem;
+    }
+
     /*音乐播放器*/
     .music-text {
         max-width: 100% !important;

diff --git a/css/style.css b/css/style.css
@@ -7,6 +7,7 @@ body {
     height: 100%;
     margin: 0;
     padding: 0;
+    background-color: #333;
 }
 
 *,
@@ -50,6 +51,9 @@ section {
     width: 100%;
     height: 100%;
     min-height: 600px;
+    transform: scale(1.10);
+    transition: 1.5s;
+    opacity: 0;
 }
 
 main {
@@ -70,18 +74,18 @@ main {
     align-items: center;
     justify-content: center;
     width: 100%;
+    --bs-gutter-x: 0 !important;
+}
+
+.col.\32 {
+    margin: 0 1.5rem;
 }
 
 .main-left {
     /*transform: translateY(240px);*/
     transform: translateY(40px);
 }
 
-/*
-.main-right {
-    transform: translateY(38%);
-}
-*/
 .row.rightone {
     display: flex;
     align-items: center;
@@ -175,6 +179,10 @@ i.iconfont.icon-yinhao-copy {
 }
 
 /*一言*/
+.col.hitokotos {
+    margin-right: 0.75rem;
+}
+
 .hitokoto {
     width: 100%;
     background: rgb(0 0 0 / 25%);
@@ -308,6 +316,10 @@ i#next {
 }
 
 /*时间卡片*/
+.col.times {
+    margin-left: 0.75rem;
+}
+
 .time {
     width: 100%;
     background: rgb(0 0 0 / 25%);

diff --git a/js/main.js b/js/main.js
@@ -1,3 +1,9 @@
+//加载动画
+window.addEventListener('load', function () {
+    $('#loading-box').attr('class', 'loaded');
+    $('#section').css("cssText", "transform: scale(1) !important;opacity: 1 !important");
+}, false)
+
 //弹窗样式
 iziToast.settings({
     timeout: 10000,
@@ -13,41 +19,6 @@ iziToast.settings({
     iconColor: '#efefef',
 });
 
-//控制台输出
-var styleTitle1 = `
-font-size: 20px;
-font-weight: 600;
-color: rgb(244,167,89);
-`
-var styleTitle2 = `
-font-style: oblique;
-font-size:14px;
-color: rgb(244,167,89);
-font-weight: 400;
-`
-var styleContent = `
-color: rgb(30,152,255);
-`
-var title1 = '無名の主页'
-var title2 = 'imsyy.top'
-var content = `
-版 本 号：1.5.0
-更新日期：2022-01-16 14:38:34
-
-更新说明：
-1. 新增 音乐播放器
-2. 新增 动态跟随鼠标样式
-3. 修复 部分控件无法点击
-4. 优化 移动端动画及细节
-5. 优化 页面加载缓慢
-6. 修复 时光胶囊显示错误
-
-主页:  https://imsyy.top
-Github:  https://github.com/imsyy/home
-`
-console.log(`%c${title1} %c${title2}
-%c${content}`, styleTitle1, styleTitle2, styleContent)
-
 //获取一言
 fetch('https://v1.hitokoto.cn?max_length=24')
     .then(response => response.json())
@@ -148,12 +119,6 @@ $section.css("background", "url('" + url + "') center center no-repeat #666");
 $section.css("background-size", "cover");
 */
 
-//加载动画
-window.addEventListener('load', function () {
-    document.body.style.overflow = 'auto';
-    document.getElementById('loading-box').classList.add("loaded")
-}, false)
-
 //链接提示文字
 $("#social").mouseover(function () {
     $("#social").css({
@@ -329,4 +294,44 @@ for (var day of days) {
             message: '历史不会忘记，人民永远铭记！'
         });
     }
-}
+}
+
+//控制台输出
+var styleTitle1 = `
+font-size: 20px;
+font-weight: 600;
+color: rgb(244,167,89);
+`
+var styleTitle2 = `
+font-size:12px;
+color: rgb(244,167,89);
+`
+var styleContent = `
+color: rgb(30,152,255);
+`
+var title1 = '無名の主页'
+var title2 = `
+ _____ __  __  _______     ____     __
+|_   _|  \\/  |/ ____\\ \\   / /\\ \\   / /
+  | | | \\  / | (___  \\ \\_/ /  \\ \\_/ / 
+  | | | |\\/| |\\___ \\  \\   /    \\   /  
+ _| |_| |  | |____) |  | |      | |   
+|_____|_|  |_|_____/   |_|      |_|                                                     
+`
+var content = `
+版 本 号：1.5.2
+更新日期：2022-01-20
+
+更新说明：
+1. 新增 音乐播放器
+2. 新增 开屏载入动画
+3. 修复 部分边距不一致
+4. 优化 移动端动画及细节
+5. 优化 页面加载缓慢
+6. 修复 时光胶囊显示错误
+
+主页:  https://imsyy.top
+Github:  https://github.com/imsyy/home
+`
+console.log(`%c${title1} %c${title2}
+%c${content}`, styleTitle1, styleTitle2, styleContent)