diff --git a/css/loading.css b/css/loading.css index 817cacf..a471be4 100644 --- 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 index 328345b..4dd843d 100644 --- 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 index 3404730..28b9d90 100644 --- 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,6 +74,11 @@ main { align-items: center; justify-content: center; width: 100%; + --bs-gutter-x: 0 !important; +} + +.col.\32 { + margin: 0 1.5rem; } .main-left { @@ -77,11 +86,6 @@ main { 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 index ce6dfa0..356b816 100644 --- 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: '历史不会忘记,人民永远铭记!' }); } -} \ No newline at end of file +} + +//控制台输出 +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)