新增载入动画 & fix 部分边距不一致
This commit is contained in:
底层用户
parent
ec133f786b
commit
c73da0a4ac
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%);
|
||||
|
||||
89
js/main.js
89
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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user