shumengya/InfoGenie
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

热门推荐

Browse Source 
热门推荐
This commit is contained in:
yangyaoxiang666
2025-09-04 14:07:42 +08:00
parent 3333f6c485
commit 6829a16f96
28 changed files with 3665 additions and 3118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/60sapi/热搜榜单/网易云榜单详情/css/background.css
View File

@@ -1,9 +1,10 @@
/* 背景样式文件 */
/* 网易云音乐特色背景样式 */
body {
background: linear-gradient(135deg, #E8F5E8 0%, #F1F8E9 25%, #E0F2F1 50%, #E8F5E8 75%, #F3E5F5 100%);
background: linear-gradient(135deg, #2b2b2b 0%, #1e1e1e 50%, #2b2b2b 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
position: relative;
color: #fff;
}
/* 背景渐变动画 */
@@ -19,7 +20,7 @@ body {
}
}
/* 背景装饰元素 */
/* 网易云红色装饰元素 */
body::before {
content: '';
position: fixed;
@@ -28,14 +29,14 @@ body::before {
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 80%, rgba(76, 175, 80, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(129, 199, 132, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(165, 214, 167, 0.08) 0%, transparent 50%);
radial-gradient(circle at 20% 80%, rgba(236, 65, 65, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(236, 65, 65, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(236, 65, 65, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: -2;
}
/* 背景粒子效果 */
/* 音符装饰效果 */
body::after {
content: '';
position: fixed;
@@ -44,11 +45,11 @@ body::after {
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(76, 175, 80, 0.3), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(129, 199, 132, 0.2), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(165, 214, 167, 0.3), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(76, 175, 80, 0.2), transparent),
radial-gradient(2px 2px at 160px 30px, rgba(129, 199, 132, 0.3), transparent);
radial-gradient(2px 2px at 20px 30px, rgba(236, 65, 65, 0.4), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(236, 65, 65, 0.3), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(236, 65, 65, 0.4), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(236, 65, 65, 0.3), transparent),
radial-gradient(2px 2px at 160px 30px, rgba(236, 65, 65, 0.4), transparent);
background-repeat: repeat;
background-size: 200px 100px;
animation: particleFloat 20s linear infinite;
@@ -82,17 +83,48 @@ body::after {
}
}
/* 音符装饰 */
.music-note {
position: absolute;
font-size: 24px;
color: rgba(236, 65, 65, 0.3);
animation: floatNote 15s linear infinite;
z-index: -1;
}
@keyframes floatNote {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.8;
}
90% {
opacity: 0.8;
}
100% {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
/* 高性能模式 - 减少动画 */
@media (prefers-reduced-motion: reduce) {
body {
animation: none;
background: linear-gradient(135deg, #E8F5E8 0%, #F1F8E9 50%, #E0F2F1 100%);
background: linear-gradient(135deg, #2b2b2b 0%, #1e1e1e 50%, #2b2b2b 100%);
}
body::after {
animation: none;
}
.music-note {
animation: none;
display: none;
}
.title {
animation: none;
}