<link rel="preload" href="/wp-content/uploads/2026/03/YSBTH.ttf" as="font" type="font/ttf" crossorigin="anonymous">
|
|
<style>
|
/* 2. 单独引入字体，确保预加载动画能第一时间读取，不干等 Elementor */
|
@font-face {
|
font-family: '优设标题黑';
|
/* 【注意：请把 url 里的链接也替换成你真实的 ttf 字体链接，和上面保持一致】 */
|
src: url('/wp-content/uploads/2026/03/YSBTH.ttf') format('truetype');
|
font-display: swap;
|
}
|
|
/* 添加了 ys_edu_ 前缀以防止与 WordPress 主题冲突 */
|
#ys_edu_custom-preloader {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100vw;
|
height: 100vh;
|
background: linear-gradient(to right, #00d1fe, #a5fed9);
|
z-index: 999999;
|
display: none; /* ← 改为 none */
|
justify-content: center;
|
align-items: center;
|
transition: opacity 0.6s ease;
|
}
|
|
.ys_edu_preloader-wrapper {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.ys_edu_img1 {
|
height: 120px;
|
display: block;
|
}
|
|
/* 初始状态：图片缩放为0 */
|
.ys_edu_img1-container {
|
transform: scale(0);
|
margin-top: -20px;
|
}
|
|
/* 初始状态：抽屉宽度为0 */
|
.ys_edu_text-container {
|
width: 0;
|
overflow: hidden;
|
margin-left: 0;
|
display: flex;
|
align-items: center;
|
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
|
mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
|
}
|
|
/* 初始状态：字符透明、偏移、模糊 */
|
.ys_edu_char {
|
font-size: 80px;
|
font-weight: 400;
|
/* 已经修改为调用上方声明的优设标题黑 */
|
font-family: '优设标题黑', 'YouSheBiaoTiHei', sans-serif;
|
color: #ffffff;
|
display: inline-block;
|
opacity: 0;
|
transform: translateX(40px);
|
filter: blur(12px);
|
}
|
|
/* ========================================= */
|
/* 发令枪：当 JS 添加 ys_edu_start-anim 类名后动画开始 */
|
/* ========================================= */
|
|
/* 1. 触发图片放大 */
|
.ys_edu_start-anim .ys_edu_img1-container {
|
animation: ys_edu_zoomIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
}
|
|
/* 2. 触发抽屉拉出 */
|
.ys_edu_start-anim .ys_edu_text-container {
|
animation: ys_edu_slideTextDrawer 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards;
|
}
|
|
/* 3. 触发逐字显现 */
|
.ys_edu_start-anim .ys_edu_char {
|
animation: ys_edu_charFadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
animation-delay: calc(1s + var(--i) * 0.1s);
|
}
|
|
@keyframes ys_edu_zoomIn {
|
0% { transform: scale(0); opacity: 0; }
|
100% { transform: scale(1); opacity: 1; }
|
}
|
|
@keyframes ys_edu_slideTextDrawer {
|
0% { width: 0; margin-left: 0; }
|
100% { width: 480px; margin-left: 20px; }
|
}
|
|
@keyframes ys_edu_charFadeIn {
|
0% { opacity: 0; transform: translateX(40px); filter: blur(12px); }
|
100% { opacity: 1; transform: translateX(0); filter: blur(0px); }
|
}
|
|
/* 移动端适配：缩小 logo 与文字，并控制抽屉展开宽度 */
|
@media (max-width: 767px) {
|
.ys_edu_preloader-wrapper {
|
padding: 0 16px;
|
}
|
|
.ys_edu_img1 {
|
height: 72px;
|
}
|
|
.ys_edu_img1-container {
|
margin-top: -10px;
|
}
|
|
.ys_edu_text-container {
|
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
|
mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
|
}
|
|
.ys_edu_char {
|
font-size: clamp(34px, 8.2vw, 46px);
|
transform: translateX(22px);
|
filter: blur(8px);
|
}
|
|
.ys_edu_start-anim .ys_edu_text-container {
|
animation: ys_edu_slideTextDrawer_mobile 1.1s cubic-bezier(0.25, 1, 0.5, 1) 0.9s forwards;
|
}
|
|
.ys_edu_start-anim .ys_edu_char {
|
animation: ys_edu_charFadeIn_mobile 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
animation-delay: calc(0.9s + var(--i) * 0.08s);
|
}
|
}
|
|
@keyframes ys_edu_slideTextDrawer_mobile {
|
0% { width: 0; margin-left: 0; }
|
100% { width: min(58vw, 220px); margin-left: 10px; }
|
}
|
|
@keyframes ys_edu_charFadeIn_mobile {
|
0% { opacity: 0; transform: translateX(22px); filter: blur(8px); }
|
100% { opacity: 1; transform: translateX(0); filter: blur(0px); }
|
}
|
</style>
|
|
<div id="ys_edu_custom-preloader">
|
<div class="ys_edu_preloader-wrapper">
|
<div class="ys_edu_img1-container">
|
<img id="ys_edu_preloader-logo" src="" alt="YStar Edu Logo" class="ys_edu_img1">
|
</div>
|
|
<div class="ys_edu_text-container">
|
<span class="ys_edu_char" style="--i:1">Y</span>
|
<span class="ys_edu_char" style="--i:2">S</span>
|
<span class="ys_edu_char" style="--i:3">t</span>
|
<span class="ys_edu_char" style="--i:4">a</span>
|
<span class="ys_edu_char" style="--i:5">r</span>
|
<span class="ys_edu_char" style="--i:6"> </span>
|
<span class="ys_edu_char" style="--i:7">E</span>
|
<span class="ys_edu_char" style="--i:8">d</span>
|
<span class="ys_edu_char" style="--i:9">u</span>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
// 立即执行：判断本地是否已经记录过播放状态
|
(function() {
|
if (!localStorage.getItem('ys_edu_preloader_shown')) {
|
var preloader = document.getElementById('ys_edu_custom-preloader');
|
if (preloader) preloader.style.display = 'flex';
|
}
|
})();
|
</script>
|
|
<script>
|
document.addEventListener('DOMContentLoaded', function() {
|
const preloader = document.getElementById('ys_edu_custom-preloader');
|
|
// 再次确认：如果已经播放过，直接跳过后续的 JS 动画逻辑
|
if (localStorage.getItem('ys_edu_preloader_shown')) {
|
return;
|
}
|
|
const logoUrl = "/wp-content/uploads/2026/03/preload-logo.webp";
|
const img = new Image();
|
img.src = logoUrl;
|
|
img.onload = function() {
|
const logoElement = document.getElementById('ys_edu_preloader-logo');
|
if (preloader && logoElement) {
|
logoElement.src = logoUrl;
|
preloader.classList.add('ys_edu_start-anim');
|
const animStartTime = Date.now();
|
|
window.addEventListener('load', function() {
|
const minTime = 3000;
|
const checkInterval = setInterval(function() {
|
if (Date.now() - animStartTime >= minTime) {
|
clearInterval(checkInterval);
|
preloader.style.opacity = '0';
|
setTimeout(function() {
|
preloader.style.display = 'none';
|
// 动画结束，将状态永久写入用户的浏览器本地存储
|
localStorage.setItem('ys_edu_preloader_shown', 'true');
|
}, 600);
|
}
|
}, 100);
|
});
|
}
|
};
|
|
img.onerror = function() {
|
if (preloader) preloader.style.display = 'none';
|
// 即使图片加载失败，也标记为已播放，避免每次刷新都卡死
|
localStorage.setItem('ys_edu_preloader_shown', 'true');
|
};
|
});
|
</script>
|
