/* 新增开始：转场 loading 遮罩（茶杯动画 + 蓝圆点图案背景 + 仓鼠跑轮） */ /* 基准 1920px；--u = 整体缩放因子，整体板块≈700px 宽居中 */ /* 修改：背景色换为 #2a2a2a、圆点改为 #494949（哥 2026-08-04）；去掉旧图片与旧蓝色流动图案 */ .ww-loading { --u: 0.3646vw; position: fixed; inset: 0; z-index: 9999; overflow: hidden; pointer-events: none; /* 不透明兜底底色，确保完全遮住目标页、不闪 */ background: #2a2a2a; /* 默认藏在屏幕右侧外；横向滑入/滑出 0.5s（哥 2026-08-04） */ transform: translateX(100%); transition: transform 0.5s ease; } /* 首帧接力：到达目标页时， 带 ww-incoming 标记，遮罩首帧即盖住中央，无过渡（解决跨页闪一下） */ html.ww-incoming .ww-loading { transform: translateX(0); transition: none; } /* 背景层：去掉旧圆点，改成「WUWU CORE VISION」斜向滚动文字（哥 2026-08-05） */ .ww-loading .ww-bg { position: absolute; inset: 0; width: 100%; height: 100%; background: #2a2a2a; overflow: hidden; z-index: 0; } /* 文字层整体放大并倾斜，保证旋转后也能铺满全屏、不留角 */ .ww-loading .ww-bg .ww-bg-text { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; transform: rotate(-25deg); display: flex; flex-direction: column; justify-content: space-around; pointer-events: none; } /* 单行文字：横向无缝滚动，奇数行向左、偶数行向右（交错感） */ /* 修改：行高压到 1.0、去掉 span 右间距，让文字排得更密（哥 2026-08-05，配合 32 行翻 4 倍） */ .ww-loading .ww-bg .ww-bg-row { white-space: nowrap; font-family: "abcfont", sans-serif; font-size: 28px; line-height: 1; letter-spacing: 0.4em; color: #494949; opacity: 0.9; will-change: transform; } /* 修改：去掉 span 右内边距，完全靠 letter-spacing 控制字距，避免行间留白 */ .ww-loading .ww-bg .ww-bg-row span { display: inline-block; } .ww-loading .ww-bg .ww-bg-row.ww-odd { animation: ww-text-left 22s linear infinite; } .ww-loading .ww-bg .ww-bg-row.ww-even { animation: ww-text-right 22s linear infinite; } @keyframes ww-text-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes ww-text-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* 方向控制（出发页 in / 到达页 out 使用） */ .ww-loading.ww-loading_from-left { transform: translateX(-100%); } .ww-loading.ww-loading_show { transform: translateX(0) !important; } .ww-loading.ww-loading_exit-left { transform: translateX(-100%); } .ww-loading.ww-loading_exit-right { transform: translateX(100%); } .ww-loading.ww-loading_notrans { transition: none !important; } /* 内容容器：屏幕正中 */ .ww-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; } /* 组合层：固定文字/仓鼠/茶杯的相对位置，整体居中 */ /* 修改：文字在上、茶杯在中、仓鼠在右下角；茶杯左对齐文字；间距拉近（哥 2026-08-04） */ .ww-loader .ww-combo { position: relative; width: calc(var(--u) * 85); height: calc(var(--u) * 40); } /* 修改：茶杯去掉后，文字水平居中于组合上方（哥 2026-08-04） */ /* 修改：标题栏同款 abcfont 字体，白色无描边，避免「雾」字被描边糊掉（哥 2026-08-04） */ /* 修改：文字往上移 40px@1920（2.0833vw），避免太贴近下方仓鼠（哥 2026-08-04） */ .ww-loader .ww-combo .ww-load { position: absolute; left: 50%; top: -2.0833vw; transform: translateX(-50%); font-family: "abcfont", sans-serif; font-size: calc(var(--u) * 9); opacity: 0.95; color: #ffffff; white-space: nowrap; letter-spacing: calc(var(--u) * 1); z-index: 2; } /* 修改：茶杯已去掉，原茶杯样式规则删除（哥 2026-08-04） */ /* 仓鼠跑轮（来自桌面「仓鼠跑轮」文件夹素材，大小约 200px） */ /* 修改：茶杯去掉后，仓鼠放到文字下方居中（哥 2026-08-04） */ /* 修改：容器宽高从 10.4vw 改为固定 200px，保证 index↔character 两页仓鼠比例绝对一致（哥 2026-08-05） */ .ww-loader .ww-combo .ww-hamster { position: absolute; left: 50%; top: calc(var(--u) * 11); transform: translateX(-50%); width: 200px; height: 200px; font-size: 16.67px; z-index: 1; } /* 修改：仓鼠身体 font-size 固定 17px（哥 2026-08-05 放大 3px），与 200px 跑轮锁定比例 */ .ww-hamster .hamster { font-size: 17px; } .ww-hamster .wheel, .ww-hamster .hamster, .ww-hamster .hamster div, .ww-hamster .spoke { position: absolute; } .ww-hamster .wheel, .ww-hamster .spoke { border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; } .ww-hamster .wheel { background: radial-gradient(100% 100% at center, hsla(0, 0%, 60%, 0) 47.8%, hsl(0, 0%, 60%) 48%); z-index: 2; } .ww-hamster .spoke { z-index: 1; } .ww-hamster .hamster { animation: ww-hamster var(--dur) ease-in-out infinite; top: 50%; left: calc(50% - 3.5em); width: 7em; height: 3.75em; transform: rotate(4deg) translate(-0.8em, 1.85em); transform-origin: 50% 0; /* 修改：仓鼠提到最前，避免腿被轮子/spoke 盖住造成穿模 */ z-index: 3; /* 修改：关闭 3D 上下文，避免子元素 translateZ 被压到轮子后面 */ transform-style: flat; } .ww-hamster .hamster__head { animation: ww-hamsterHead var(--dur) ease-in-out infinite; background: hsl(30, 90%, 55%); border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; box-shadow: 0 -0.25em 0 hsl(30, 90%, 80%) inset, 0.75em -1.55em 0 hsl(30, 90%, 90%) inset; top: 0; left: -2em; width: 2.75em; height: 2.5em; transform-origin: 100% 50%; } .ww-hamster .hamster__ear { animation: ww-hamsterEar var(--dur) ease-in-out infinite; background: hsl(0, 90%, 85%); border-radius: 50%; box-shadow: -0.25em 0 hsl(30, 90%, 55%) inset; top: -0.25em; right: -0.25em; width: 0.75em; height: 0.75em; transform-origin: 50% 75%; } .ww-hamster .hamster__eye { animation: ww-hamsterEye var(--dur) linear infinite; background-color: hsl(0, 0%, 0%); border-radius: 50%; top: 0.375em; left: 1.25em; width: 0.5em; height: 0.5em; } .ww-hamster .hamster__nose { background: hsl(0, 90%, 75%); border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; top: 0.75em; left: 0; width: 0.2em; height: 0.25em; } .ww-hamster .hamster__body { animation: ww-hamsterBody var(--dur) ease-in-out infinite; background: hsl(30, 90%, 90%); border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; box-shadow: 0.1em 0.75em 0 hsl(30, 90%, 55%) inset, 0.15em -0.5em 0 hsl(30, 90%, 80%) inset; top: 0.25em; left: 2em; width: 4.5em; height: 3em; transform-origin: 17% 50%; transform-style: preserve-3d; } .ww-hamster .hamster__limb--fr, .ww-hamster .hamster__limb--fl { clip-path: polygon(0 0, 100% 0, 70% 80%, 60% 100%, 0% 100%, 40% 80%); top: 2em; left: 0.5em; width: 1em; height: 1.5em; transform-origin: 50% 0; } .ww-hamster .hamster__limb--fr { animation: ww-hamsterFRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30, 90%, 80%) 80%, hsl(0, 90%, 75%) 80%); /* 修改：去掉 translateZ(-1px)，避免 3D 堆叠导致腿被轮子盖住（穿模） */ transform: rotate(15deg); } .ww-hamster .hamster__limb--fl { animation: ww-hamsterFLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30, 90%, 90%) 80%, hsl(0, 90%, 85%) 80%); transform: rotate(15deg); } .ww-hamster .hamster__limb--br, .ww-hamster .hamster__limb--bl { border-radius: 0.75em 0.75em 0 0; clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 90%, 70% 100%, 30% 100%, 40% 90%, 0% 30%); top: 1em; left: 2.8em; width: 1.5em; height: 2.5em; transform-origin: 50% 30%; } .ww-hamster .hamster__limb--br { animation: ww-hamsterBRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30, 90%, 80%) 90%, hsl(0, 90%, 75%) 90%); /* 修改：去掉 translateZ(-1px)，避免 3D 堆叠导致腿被轮子盖住（穿模） */ transform: rotate(-25deg); } .ww-hamster .hamster__limb--bl { animation: ww-hamsterBLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30, 90%, 90%) 90%, hsl(0, 90%, 85%) 90%); transform: rotate(-25deg); } .ww-hamster .hamster__tail { animation: ww-hamsterTail var(--dur) linear infinite; background: hsl(0, 90%, 85%); border-radius: 0.25em 50% 50% 0.25em; box-shadow: 0 -0.2em 0 hsl(0, 90%, 75%) inset; top: 1.5em; right: -0.5em; width: 1em; height: 0.5em; /* 修改：去掉 translateZ(-1px)，避免 3D 堆叠导致尾巴被轮子盖住 */ transform: rotate(30deg); transform-origin: 0.25em 0.25em; } .ww-hamster .spoke { animation: ww-spoke var(--dur) linear infinite; background: radial-gradient(100% 100% at center, hsl(0, 0%, 60%) 4.8%, hsla(0, 0%, 60%, 0) 5%), linear-gradient(hsla(0, 0%, 55%, 0) 46.9%, hsl(0, 0%, 65%) 47% 52.9%, hsla(0, 0%, 65%, 0) 53%) 50% 50% / 99% 99% no-repeat; } .ww-hamster { --dur: 1s; } @keyframes ww-hamster { from, to { transform: rotate(4deg) translate(-0.8em, 1.85em); } 50% { transform: rotate(0) translate(-0.8em, 1.85em); } } @keyframes ww-hamsterHead { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(8deg); } } @keyframes ww-hamsterEye { from, 90%, to { transform: scaleY(1); } 95% { transform: scaleY(0); } } @keyframes ww-hamsterEar { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(12deg); } } @keyframes ww-hamsterBody { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-2deg); } } @keyframes ww-hamsterFRLimb { from, 25%, 50%, 75%, to { transform: rotate(50deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-30deg); } } @keyframes ww-hamsterFLLimb { from, 25%, 50%, 75%, to { transform: rotate(-30deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(50deg); } } @keyframes ww-hamsterBRLimb { from, 25%, 50%, 75%, to { transform: rotate(-60deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(20deg); } } @keyframes ww-hamsterBLLimb { from, 25%, 50%, 75%, to { transform: rotate(20deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-60deg); } } @keyframes ww-hamsterTail { from, 25%, 50%, 75%, to { transform: rotate(30deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(10deg); } } @keyframes ww-spoke { from { transform: rotate(0); } to { transform: rotate(-1turn); } } /* 新增结束 */