dellevin/BaiTu-homepage
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化星云相册

Browse Source
This commit is contained in:
DelLevin-Home
2026-06-05 19:02:52 +08:00
parent a2de47355c
commit d7505e5b0c
6 changed files with 315 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
static/css/galaxy.css
View File

@@ -161,102 +161,15 @@
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
/* 第一大区域 - 各种随机位置和大小 */
radial-gradient(1px 1px at 5px 15px, #fff, transparent),
radial-gradient(2px 2px at 45px 8px, rgba(255,255,255,0.85), transparent),
radial-gradient(1px 1px at 82px 42px, rgba(255,255,255,0.6), transparent),
radial-gradient(3px 3px at 120px 25px, #fff, transparent),
radial-gradient(1px 1px at 155px 58px, rgba(255,255,255,0.9), transparent),
radial-gradient(2px 2px at 192px 12px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 228px 48px, #fff, transparent),
radial-gradient(2px 2px at 265px 32px, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 302px 65px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 338px 8px, #fff, transparent),
radial-gradient(2px 2px at 375px 42px, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 412px 18px, rgba(255,255,255,0.6), transparent),
radial-gradient(2px 2px at 448px 55px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 485px 38px, #fff, transparent),
radial-gradient(1px 1px at 522px 72px, rgba(255,255,255,0.7), transparent),
radial-gradient(3px 3px at 558px 28px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 595px 52px, #fff, transparent),
/* 第二大区域 - 更随机的分布 */
radial-gradient(2px 2px at 22px 78px, rgba(255,255,255,0.45), transparent),
radial-gradient(1px 1px at 68px 92px, #fff, transparent),
radial-gradient(1px 1px at 108px 85px, rgba(255,255,255,0.55), transparent),
radial-gradient(2px 2px at 145px 98px, rgba(255,255,255,0.35), transparent),
radial-gradient(1px 1px at 182px 88px, #fff, transparent),
radial-gradient(1px 1px at 218px 75px, rgba(255,255,255,0.65), transparent),
radial-gradient(2px 2px at 255px 95px, rgba(255,255,255,0.45), transparent),
radial-gradient(1px 1px at 292px 82px, #fff, transparent),
radial-gradient(1px 1px at 328px 98px, rgba(255,255,255,0.75), transparent),
radial-gradient(2px 2px at 365px 78px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 402px 92px, #fff, transparent),
radial-gradient(1px 1px at 438px 85px, rgba(255,255,255,0.4), transparent),
radial-gradient(2px 2px at 475px 95px, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 512px 78px, #fff, transparent),
radial-gradient(1px 1px at 548px 88px, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 585px 82px, rgba(255,255,255,0.3), transparent),
/* 第三大区域 - 散落的小星星 */
radial-gradient(1px 1px at 15px 108px, rgba(255,255,255,0.25), transparent),
radial-gradient(1px 1px at 52px 118px, rgba(255,255,255,0.15), transparent),
radial-gradient(1px 1px at 88px 112px, rgba(255,255,255,0.35), transparent),
radial-gradient(1px 1px at 125px 105px, rgba(255,255,255,0.2), transparent),
radial-gradient(1px 1px at 162px 120px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 198px 108px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 235px 115px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 272px 102px, rgba(255,255,255,0.2), transparent),
radial-gradient(1px 1px at 308px 120px, rgba(255,255,255,0.35), transparent),
radial-gradient(1px 1px at 345px 108px, rgba(255,255,255,0.45), transparent),
radial-gradient(1px 1px at 382px 115px, rgba(255,255,255,0.15), transparent),
radial-gradient(1px 1px at 418px 102px, rgba(255,255,255,0.25), transparent),
radial-gradient(1px 1px at 455px 112px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 492px 105px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 528px 118px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 565px 108px, rgba(255,255,255,0.2), transparent),
radial-gradient(1px 1px at 602px 115px, rgba(255,255,255,0.35), transparent),
/* 额外的亮点 */
radial-gradient(2px 2px at 35px 55px, rgba(255,255,255,0.6), transparent),
radial-gradient(3px 3px at 175px 35px, rgba(255,255,255,0.8), transparent),
radial-gradient(2px 2px at 315px 68px, rgba(255,255,255,0.7), transparent),
radial-gradient(2px 2px at 455px 25px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 535px 42px, rgba(255,255,255,0.9), transparent),
radial-gradient(2px 2px at 75px 68px, rgba(255,255,255,0.65), transparent),
radial-gradient(1px 1px at 205px 82px, rgba(255,255,255,0.75), transparent),
radial-gradient(3px 3px at 385px 48px, rgba(255,255,255,0.55), transparent),
radial-gradient(1px 1px at 505px 72px, rgba(255,255,255,0.85), transparent),
radial-gradient(2px 2px at 625px 15px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 652px 58px, rgba(255,255,255,0.7), transparent),
radial-gradient(2px 2px at 688px 32px, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 725px 45px, rgba(255,255,255,0.8), transparent),
radial-gradient(2px 2px at 762px 62px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 798px 18px, rgba(255,255,255,0.65), transparent),
radial-gradient(1px 1px at 835px 75px, rgba(255,255,255,0.45), transparent),
radial-gradient(2px 2px at 872px 42px, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 908px 28px, rgba(255,255,255,0.55), transparent),
radial-gradient(2px 2px at 945px 65px, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 982px 38px, rgba(255,255,255,0.4), transparent);
background-repeat: repeat;
background-size: 1000px 130px;
animation: twinkle 3s ease-in-out infinite alternate, drift 20s linear infinite;
right: 0;
bottom: 0;
background-image: url('../img/planets/bg.jpg');
background-size: cover;
background-position: center;
pointer-events: none;
z-index: 0;
}
@keyframes twinkle {
0% { opacity: 0.4; }
33% { opacity: 0.7; }
66% { opacity: 0.5; }
100% { opacity: 0.8; }
}
@keyframes drift {
0% { transform: translate(0, 0); }
100% { transform: translate(-10px, -5px); }
}
.galaxy-canvas-wrapper canvas {
width: 100%;
height: 100%;