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

This commit is contained in:
底层用户 2022-01-20 12:12:25 +08:00
parent ec133f786b
commit c73da0a4ac
4 changed files with 100 additions and 53 deletions

View File

@ -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 {

View File

@ -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;

View File

@ -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%);

View File

@ -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({
@ -330,3 +295,43 @@ for (var day of days) {
});
}
}
//控制台输出
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)