2026-02-27 22:28:01 +08:00
<!doctype html> < html lang = "zh-cmn-Hans" >< head >< meta charset = "utf-8" >< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >< meta name = "viewport" content = "width=device-width,initial-scale=1" >< link rel = "icon" href = "/slogo.png" >< title > QuantDinger</ title >< style >. first-loading-wrp {
display : flex ;
justify-content : center ;
align-items : center ;
flex-direction : column ;
min-height : 420 px ;
height : 100 vh ;
background : #fff ;
position : relative ;
overflow : hidden ;
}
. first-loading-wrp > h2 {
font-size : 32 px ;
margin-bottom : 40 px ;
color : #333 ;
font-weight : 600 ;
}
. first-loading-wrp . loading-wrp {
padding : 40 px ;
display : flex ;
justify-content : center ;
align-items : center ;
flex-direction : column ;
position : relative ;
width : 100 % ;
max-width : 600 px ;
}
/* 像素风格小猫奔跑动画容器 */
. pixel-cat-container {
position : relative ;
width : 100 % ;
height : 120 px ;
margin : 0 auto 30 px ;
overflow : hidden ;
}
/* 像素小猫主体 */
. pixel-cat {
position : absolute ;
left : 0 ;
bottom : 24 px ;
width : 32 px ;
height : 32 px ;
animation : catRun 0.4 s steps ( 2 ) infinite , catMove 3.5 s linear infinite ;
image-rendering : pixelated ;
image-rendering : -moz- crisp-edges ;
image-rendering : crisp-edges ;
}
/* 所有像素元素都使用锐利边缘 */
. pixel-cat * {
image-rendering : pixelated ;
image-rendering : -moz- crisp-edges ;
image-rendering : crisp-edges ;
}
/* 猫头 - 像素方块组成 */
. cat-head {
position : absolute ;
left : 2 px ;
top : 0 ;
width : 16 px ;
height : 14 px ;
background :
/* 头部主体白色 */
linear-gradient ( #fff , #fff ) 2 px 4 px / 12 px 10 px no-repeat ,
/* 左半脸黑色斑块 */
linear-gradient ( #000 , #000 ) 2 px 4 px / 6 px 10 px no-repeat ,
/* 头顶 */
linear-gradient ( #fff , #fff ) 4 px 2 px / 8 px 2 px no-repeat ;
animation : headBob 0.4 s steps ( 2 ) infinite ;
}
/* 左耳 - 黑色尖耳朵 */
. cat-ear-left {
position : absolute ;
left : 0 px ;
top : -2 px ;
width : 4 px ;
height : 6 px ;
background :
linear-gradient ( #000 , #000 ) 0 px 4 px / 4 px 2 px no-repeat ,
linear-gradient ( #000 , #000 ) 1 px 2 px / 2 px 2 px no-repeat ,
linear-gradient ( #000 , #000 ) 1 px 0 px / 2 px 2 px no-repeat ;
}
/* 右耳 - 白色尖耳朵 */
. cat-ear-right {
position : absolute ;
right : 0 px ;
top : -2 px ;
width : 4 px ;
height : 6 px ;
background :
linear-gradient ( #fff , #fff ) 0 px 4 px / 4 px 2 px no-repeat ,
linear-gradient ( #fff , #fff ) 1 px 2 px / 2 px 2 px no-repeat ,
linear-gradient ( #fff , #fff ) 1 px 0 px / 2 px 2 px no-repeat ;
box-shadow : inset 0 0 0 1 px #000 ;
}
. cat-ear-right :: after {
content : '' ;
position : absolute ;
width : 4 px ;
height : 6 px ;
border : 1 px solid #000 ;
border-width : 0 1 px 0 0 ;
box-sizing : border-box ;
}
/* 左眼 - 黑底白眼（在黑色区域） */
. cat-eye-left {
position : absolute ;
left : 4 px ;
top : 6 px ;
width : 4 px ;
height : 4 px ;
background : #fff ;
}
. cat-eye-left :: after {
content : '' ;
position : absolute ;
left : 2 px ;
top : 1 px ;
width : 2 px ;
height : 2 px ;
background : #000 ;
}
/* 右眼 - 白底黑眼（在白色区域） */
. cat-eye-right {
position : absolute ;
right : 2 px ;
top : 6 px ;
width : 4 px ;
height : 4 px ;
background : #fff ;
border : 1 px solid #000 ;
box-sizing : border-box ;
}
. cat-eye-right :: after {
content : '' ;
position : absolute ;
left : 1 px ;
top : 0 px ;
width : 2 px ;
height : 2 px ;
background : #000 ;
}
/* 鼻子 - 小粉色方块 */
. cat-nose {
position : absolute ;
left : 7 px ;
top : 10 px ;
width : 2 px ;
height : 2 px ;
background : #000 ;
}
/* 胡须 - 像素线条 */
. cat-whiskers {
position : absolute ;
left : 0 ;
top : 10 px ;
width : 16 px ;
height : 4 px ;
}
. cat-whiskers :: before {
content : '' ;
position : absolute ;
left : -4 px ;
top : 0 ;
width : 4 px ;
height : 1 px ;
background : #000 ;
box-shadow : 0 2 px 0 #000 ;
}
. cat-whiskers :: after {
content : '' ;
position : absolute ;
right : -4 px ;
top : 0 ;
width : 4 px ;
height : 1 px ;
background : #000 ;
box-shadow : 0 2 px 0 #000 ;
}
/* 身体 - 黑白相间像素块 */
. cat-body {
position : absolute ;
left : 4 px ;
top : 14 px ;
width : 14 px ;
height : 10 px ;
background :
/* 白色部分 */
linear-gradient ( #fff , #fff ) 6 px 0 / 8 px 10 px no-repeat ,
/* 黑色部分 */
linear-gradient ( #000 , #000 ) 0 0 / 8 px 10 px no-repeat ;
border : 1 px solid #000 ;
box-sizing : border-box ;
}
/* 前腿 - 左 (黑色) */
. cat-leg-front-left {
position : absolute ;
left : 6 px ;
top : 22 px ;
width : 3 px ;
height : 8 px ;
background : #000 ;
animation : legFront 0.2 s steps ( 2 ) infinite ;
}
/* 前腿 - 右 (白色带边框) */
. cat-leg-front-right {
position : absolute ;
left : 12 px ;
top : 22 px ;
width : 3 px ;
height : 8 px ;
background : #fff ;
border : 1 px solid #000 ;
box-sizing : border-box ;
animation : legFront 0.2 s steps ( 2 ) infinite 0.1 s ;
}
/* 后腿 - 左 (白色带边框) */
. cat-leg-back-left {
position : absolute ;
left : 3 px ;
top : 22 px ;
width : 3 px ;
height : 8 px ;
background : #fff ;
border : 1 px solid #000 ;
box-sizing : border-box ;
animation : legBack 0.2 s steps ( 2 ) infinite 0.1 s ;
}
/* 后腿 - 右 (黑色) */
. cat-leg-back-right {
position : absolute ;
left : 15 px ;
top : 22 px ;
width : 3 px ;
height : 8 px ;
background : #000 ;
animation : legBack 0.2 s steps ( 2 ) infinite ;
}
/* 尾巴 - 长且弯曲的像素尾巴 */
. cat-tail {
position : absolute ;
right : -10 px ;
top : 10 px ;
width : 12 px ;
height : 10 px ;
background :
/* 尾巴根部 */
linear-gradient ( #000 , #000 ) 0 6 px / 3 px 3 px no-repeat ,
/* 尾巴中部 */
linear-gradient ( #000 , #000 ) 3 px 4 px / 3 px 3 px no-repeat ,
/* 尾巴弯曲 */
linear-gradient ( #000 , #000 ) 6 px 2 px / 3 px 3 px no-repeat ,
/* 尾巴尖端 */
linear-gradient ( #000 , #000 ) 9 px 0 / 3 px 3 px no-repeat ;
animation : tailWag 0.3 s steps ( 2 ) infinite alternate ;
transform-origin : left bottom ;
}
/* 奔跑动画 - 轻微上下跳动 */
@ keyframes catRun {
0 %, 100 % { transform : translateY ( 0 ); }
50 % { transform : translateY ( -3 px ); }
}
/* 移动动画 - 左右移动 */
@ keyframes catMove {
0 % { left : -40 px ; }
100 % { left : calc ( 100 % + 40 px ); }
}
/* 前腿动画 */
@ keyframes legFront {
0 %, 100 % { transform : rotate ( -15 deg ); }
50 % { transform : rotate ( 15 deg ); }
}
/* 后腿动画 */
@ keyframes legBack {
0 %, 100 % { transform : rotate ( 15 deg ); }
50 % { transform : rotate ( -15 deg ); }
}
/* 尾巴摆动 */
@ keyframes tailWag {
0 % { transform : rotate ( -10 deg ); }
100 % { transform : rotate ( 10 deg ); }
}
/* 头部轻微摆动 */
@ keyframes headBob {
0 %, 100 % { transform : translateY ( 0 ); }
50 % { transform : translateY ( -1 px ); }
}
/* 地面效果 - 像素风格 */
. ground {
position : absolute ;
bottom : 0 ;
left : 0 ;
right : 0 ;
height : 12 px ;
background : repeating-linear-gradient (
90 deg ,
#222 0 px ,
#222 6 px ,
#555 6 px ,
#555 12 px
);
animation : groundMove 0.3 s linear infinite ;
image-rendering : pixelated ;
}
@ keyframes groundMove {
0 % { background-position : 0 0 ; }
100 % { background-position : 12 px 0 ; }
}
/* 品牌文字 */
. brand-text {
display : flex ;
justify-content : center ;
align-items : center ;
font-size : 24 px ;
font-weight : 600 ;
color : #333 ;
margin-top : 20 px ;
letter-spacing : 2 px ;
}
/* 暗色主题适配 */
@ media ( prefers-color-scheme : dark ) {
. first-loading-wrp {
background : #141414 ;
}
. first-loading-wrp > h2 {
color : #fff ;
}
. brand-text {
color : #fff ;
}
. ground {
background : repeating-linear-gradient (
90 deg ,
#555 0 px ,
#555 6 px ,
#333 6 px ,
#333 12 px
);
}
/* 暗色模式下白色部分改成浅灰 */
. cat-head {
background :
linear-gradient ( #ddd , #ddd ) 2 px 4 px / 12 px 10 px no-repeat ,
linear-gradient ( #000 , #000 ) 2 px 4 px / 6 px 10 px no-repeat ,
linear-gradient ( #ddd , #ddd ) 4 px 2 px / 8 px 2 px no-repeat ;
}
. cat-body {
background :
linear-gradient ( #ddd , #ddd ) 6 px 0 / 8 px 10 px no-repeat ,
linear-gradient ( #000 , #000 ) 0 0 / 8 px 10 px no-repeat ;
}
. cat-leg-front-right ,
. cat-leg-back-left {
background : #ddd ;
}
. cat-eye-left ,
. cat-eye-right {
background : #ddd ;
}
}
/* 确保像素风格在所有浏览器中正确显示 */
. pixel-cat ,
. pixel-cat * {
image-rendering : -moz- crisp-edges ;
image-rendering : -webkit- crisp-edges ;
image-rendering : pixelated ;
image-rendering : crisp-edges ;
}
/* 手机端适配 */
@ media ( max-width : 768px ) {
. pixel-cat-container {
transform : scale ( 1.5 );
}
. first-loading-wrp > h2 {
font-size : 24 px ;
margin-bottom : 30 px ;
}
. brand-text {
font-size : 20 px ;
}
2026-03-17 20:30:04 +08:00
}</ style >< script defer = "defer" src = "/js/chunk-vendors.b7f38551.js" type = "module" ></ script >< script defer = "defer" src = "/js/app.d094c0fc.js" type = "module" ></ script >< link href = "/css/chunk-vendors.b8cb9e53.css" rel = "stylesheet" >< link href = "/css/app.ee3dda40.css" rel = "stylesheet" >< script defer = "defer" src = "/js/chunk-vendors-legacy.2846149e.js" nomodule ></ script >< script defer = "defer" src = "/js/app-legacy.f346bd4d.js" nomodule ></ script ></ head >< body >< noscript >< strong > We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</ strong ></ noscript >< div id = "app" >< div class = "first-loading-wrp" >< h2 > Landing</ h2 >< div class = "loading-wrp" >< div class = "pixel-cat-container" >< div class = "ground" ></ div >< div class = "pixel-cat" >< div class = "cat-head" >< div class = "cat-ear-left" ></ div >< div class = "cat-ear-right" ></ div >< div class = "cat-eye-left" ></ div >< div class = "cat-eye-right" ></ div >< div class = "cat-nose" ></ div >< div class = "cat-whiskers" ></ div ></ div >< div class = "cat-body" ></ div >< div class = "cat-leg-front-left" ></ div >< div class = "cat-leg-front-right" ></ div >< div class = "cat-leg-back-left" ></ div >< div class = "cat-leg-back-right" ></ div >< div class = "cat-tail" ></ div ></ div ></ div ></ div >< div class = "brand-text" > QuantDinger</ div ></ div ></ div ></ body ></ html >
