微件:CodeLoadingUI/SCF:修订间差异
来自SOKA CAFE
Banmad3n(留言 | 贡献) (创建页面,内容为“<!-- CSS 样式 --> <style> →全屏覆盖层: #loadingOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 1000; color: #fff; font-family: monospace; } →加载动画: .loader { border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50…”) |
|||
| 第13行: | 第13行: | ||
align-items: center; | align-items: center; | ||
flex-direction: column; | flex-direction: column; | ||
z-index: 1000; | z-index: 1000; /* 确保加载界面在最上层 */ | ||
color: #fff; | color: #fff; | ||
font-family: monospace; | font-family: monospace; | ||
| 第60行: | 第60行: | ||
overflow: auto; | overflow: auto; | ||
white-space: pre-wrap; | white-space: pre-wrap; | ||
} | |||
/* 背景图片样式 */ | |||
.Cbackground { | |||
position: fixed; | |||
background-size: cover !important; | |||
top: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: -1; /* 背景图片在底层 */ | |||
background-position: center !important; | |||
} | |||
#mw-content-container { background: rgba(255, 255, 255, 0.6); } | |||
#mw-content, .sidebar-chunk { | |||
background: rgba(255, 255, 255, 0.7) !important; | |||
backdrop-filter: blur(20px); | |||
} | } | ||
</style> | </style> | ||
<!-- HTML 结构 --> | <!-- HTML 结构 --> | ||
| 第107行: | 第107行: | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- 背景图片容器 --> | |||
<div id="Cbackground" data-file="宗教都市祭封面1 V2.PNG"></div> | |||
<!-- JavaScript 逻辑 --> | |||
<script> | |||
// 确保DOM加载完成后再执行脚本 | |||
document.addEventListener('DOMContentLoaded', function () { | |||
var progress = 0; | |||
var progressBar = document.getElementById('progressBar').querySelector('div'); | |||
var interval = setInterval(function () { | |||
progress += 10; | |||
progressBar.style.width = progress + '%'; | |||
if (progress >= 100) { | |||
clearInterval(interval); | |||
document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面 | |||
// 加载背景图片 | |||
var Cbackground = document.getElementById("Cbackground"); | |||
var file = Cbackground.getAttribute("data-file"); | |||
Cbackground.setAttribute('style', 'background:url(' + file + ')'); | |||
var wrapper = document.getElementById("mw-wrapper"); | |||
if (wrapper) { | |||
wrapper.appendChild(Cbackground); | |||
} | |||
} | |||
}, 300); | |||
}); | |||
</script> | |||
2025年3月2日 (日) 09:57的版本
<style>
/* 全屏覆盖层 */
#loadingOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 1000; /* 确保加载界面在最上层 */
color: #fff;
font-family: monospace;
}
/* 加载动画 */
.loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 进度条 */
#progressBar {
width: 200px;
height: 10px;
background: #444;
margin-top: 20px;
border-radius: 5px;
overflow: hidden;
}
#progressBar div {
height: 100%;
width: 0;
background: #3498db;
transition: width 0.5s ease;
}
/* 模拟代码样式 */
#codeDisplay {
margin-top: 20px;
background: #222;
padding: 10px;
border-radius: 5px;
width: 80%;
max-width: 600px;
overflow: auto;
white-space: pre-wrap;
}
/* 背景图片样式 */
.Cbackground {
position: fixed;
background-size: cover !important;
top: 0;
width: 100%;
height: 100%;
z-index: -1; /* 背景图片在底层 */
background-position: center !important;
}
#mw-content-container { background: rgba(255, 255, 255, 0.6); }
#mw-content, .sidebar-chunk {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(20px);
}
</style>
Loading system...
dir /s /b shukyo_city_festival File Not Found
dir /s /b *shukyo_city_festival Finding…
┗ admin:File Not Found ┗ adult:File Not Found ┗ alternative:File Not Found ┗ credit:File Not Found ┗ declassified:File Not Found ┗ fragment:File Not Found ┗ system:File Not Found ┗ thous:【合作】宗教都市祭 ~ Shukyo City Festival
>/thous:【合作】宗教都市祭 ~ Shukyo City Festival
<script>
// 确保DOM加载完成后再执行脚本
document.addEventListener('DOMContentLoaded', function () {
var progress = 0;
var progressBar = document.getElementById('progressBar').querySelector('div');
var interval = setInterval(function () {
progress += 10;
progressBar.style.width = progress + '%';
if (progress >= 100) {
clearInterval(interval);
document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
// 加载背景图片
var Cbackground = document.getElementById("Cbackground");
var file = Cbackground.getAttribute("data-file");
Cbackground.setAttribute('style', 'background:url(' + file + ')');
var wrapper = document.getElementById("mw-wrapper");
if (wrapper) {
wrapper.appendChild(Cbackground);
}
}
}, 300);
});
</script>
