新增载入动画 & fix 部分边距不一致
This commit is contained in:
parent
ec133f786b
commit
c73da0a4ac
@ -6,7 +6,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgb(81 81 81 / 80%);
|
background-color: rgb(81 81 81 / 80%);
|
||||||
transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
|
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 {
|
#loading-box .loading-right-bg {
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
.container-lg,
|
.container-lg,
|
||||||
.container-md,
|
.container-md,
|
||||||
.container-sm {
|
.container-sm {
|
||||||
max-width: 1100px !important;
|
max-width: 1000px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weekday {
|
.weekday {
|
||||||
@ -27,17 +27,32 @@
|
|||||||
/*小于992px时*/
|
/*小于992px时*/
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
|
|
||||||
/*简介不可点击
|
/*总布局*/
|
||||||
.message {
|
.container,
|
||||||
pointer-events: none;
|
.container-lg,
|
||||||
|
.container-md,
|
||||||
|
.container-sm {
|
||||||
|
max-width: 900px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col.left {
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col.right {
|
||||||
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
|
||||||
/*一言*/
|
/*一言*/
|
||||||
.col.hitokotos {
|
.col.hitokotos {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*时间卡片*/
|
||||||
|
.col.times {
|
||||||
|
margin-left: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*日期显示*/
|
/*日期显示*/
|
||||||
.weekday {
|
.weekday {
|
||||||
display: inline;
|
display: inline;
|
||||||
@ -116,11 +131,21 @@
|
|||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*左侧栏边距*/
|
||||||
|
.col.left {
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*右侧栏隐藏*/
|
/*右侧栏隐藏*/
|
||||||
.col.right {
|
.col.right {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*右侧栏边距*/
|
||||||
|
.col.right {
|
||||||
|
margin-left: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*标题文字*/
|
/*标题文字*/
|
||||||
span.img-text {
|
span.img-text {
|
||||||
display: inline;
|
display: inline;
|
||||||
@ -187,6 +212,11 @@
|
|||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*一言边距*/
|
||||||
|
.col.hitokotos {
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*音乐播放器*/
|
/*音乐播放器*/
|
||||||
.music-text {
|
.music-text {
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
|
@ -7,6 +7,7 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
background-color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
@ -50,6 +51,9 @@ section {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 600px;
|
min-height: 600px;
|
||||||
|
transform: scale(1.10);
|
||||||
|
transition: 1.5s;
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@ -70,6 +74,11 @@ main {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
--bs-gutter-x: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col.\32 {
|
||||||
|
margin: 0 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-left {
|
.main-left {
|
||||||
@ -77,11 +86,6 @@ main {
|
|||||||
transform: translateY(40px);
|
transform: translateY(40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
.main-right {
|
|
||||||
transform: translateY(38%);
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
.row.rightone {
|
.row.rightone {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -175,6 +179,10 @@ i.iconfont.icon-yinhao-copy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*一言*/
|
/*一言*/
|
||||||
|
.col.hitokotos {
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.hitokoto {
|
.hitokoto {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgb(0 0 0 / 25%);
|
background: rgb(0 0 0 / 25%);
|
||||||
@ -308,6 +316,10 @@ i#next {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*时间卡片*/
|
/*时间卡片*/
|
||||||
|
.col.times {
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgb(0 0 0 / 25%);
|
background: rgb(0 0 0 / 25%);
|
||||||
|
87
js/main.js
87
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({
|
iziToast.settings({
|
||||||
timeout: 10000,
|
timeout: 10000,
|
||||||
@ -13,41 +19,6 @@ iziToast.settings({
|
|||||||
iconColor: '#efefef',
|
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')
|
fetch('https://v1.hitokoto.cn?max_length=24')
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
@ -148,12 +119,6 @@ $section.css("background", "url('" + url + "') center center no-repeat #666");
|
|||||||
$section.css("background-size", "cover");
|
$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").mouseover(function () {
|
||||||
$("#social").css({
|
$("#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)
|
||||||
|
Loading…
Reference in New Issue
Block a user