From 90fecfa743b1296e3571eee74a5a2df79a8697de Mon Sep 17 00:00:00 2001
From: wzp <2040239371@qq.com>
Date: 星期三, 01 四月 2026 18:26:46 +0800
Subject: [PATCH] 添加预加载动画
---
映星教育/预加载动画 | 177 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 177 insertions(+), 0 deletions(-)
diff --git "a/\346\230\240\346\230\237\346\225\231\350\202\262/\351\242\204\345\212\240\350\275\275\345\212\250\347\224\273" "b/\346\230\240\346\230\237\346\225\231\350\202\262/\351\242\204\345\212\240\350\275\275\345\212\250\347\224\273"
new file mode 100644
index 0000000..009e075
--- /dev/null
+++ "b/\346\230\240\346\230\237\346\225\231\350\202\262/\351\242\204\345\212\240\350\275\275\345\212\250\347\224\273"
@@ -0,0 +1,177 @@
+<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); }
+ }
+</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>
\ No newline at end of file
--
Gitblit v1.9.1