| New file |
| | |
| | | <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> |