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

继续更新

Browse Source
This commit is contained in:
树萌芽
2025-10-15 11:11:23 +08:00
parent 7786e5f507
commit c147502b4d
89 changed files with 8116 additions and 2505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/css/style.css
View File

@@ -18,11 +18,11 @@
height: 200%;
background: linear-gradient(
135deg,
rgba(64, 169, 255, 0.4) 0%,
rgba(120, 192, 255, 0.3) 25%,
rgba(255, 175, 64, 0.2) 50%,
rgba(255, 140, 50, 0.3) 75%,
rgba(255, 122, 69, 0.4) 100%
rgba(168, 230, 207, 0.3) 0%,
rgba(220, 237, 193, 0.25) 25%,
rgba(200, 245, 200, 0.15) 50%,
rgba(180, 235, 180, 0.25) 75%,
rgba(168, 230, 207, 0.3) 100%
);
animation: gradient-flow 20s ease-in-out infinite;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
@@ -37,11 +37,11 @@
height: 100%;
background: radial-gradient(
circle at 30% 70%,
rgba(64, 169, 255, 0.5) 0%,
rgba(129, 199, 132, 0.4) 0%,
transparent 50%
), radial-gradient(
circle at 70% 30%,
rgba(255, 140, 50, 0.4) 0%,
rgba(165, 214, 167, 0.3) 0%,
transparent 50%
);
animation: pulse-effect 15s ease-in-out infinite alternate;
@@ -106,13 +106,13 @@ body {
}
.geometric-decoration {
font-size: 20px;
color: #f04040;
margin: 0 15px;
font-weight: bold;
letter-spacing: 5px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
animation: float-effect 3s ease-in-out infinite alternate;
font-size: 16px;
color: #81c784;
margin: 0 10px;
font-weight: normal;
letter-spacing: 3px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
opacity: 0.6;
}
.geometric-decoration.left {
@@ -140,10 +140,13 @@ body {
}
.time-decoration {
color: #f04040;
font-size: 18px;
margin: 0 10px;
animation: pulse 2s infinite;
font-size: 14px;
color: #a5d6a7;
margin: 0 8px;
font-weight: normal;
letter-spacing: 2px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
opacity: 0.5;
}
@keyframes pulse {
@@ -163,11 +166,11 @@ body {
.geometric-header, .geometric-footer {
text-align: center;
color: #f04040;
margin: 15px 0;
font-size: 16px;
letter-spacing: 3px;
opacity: 0.8;
color: #a5d6a7;
margin: 10px 0;
font-size: 14px;
letter-spacing: 2px;
opacity: 0.5;
}
.geometric-header {
@@ -188,7 +191,7 @@ body {
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px);
border: 2px solid rgba(240, 64, 64, 0.3);
border: 1px solid rgba(129, 199, 132, 0.2);
position: relative;
}
@@ -198,7 +201,7 @@ body {
position: absolute;
width: 30px;
height: 30px;
border-color: #f04040;
border-color: #a5d6a7;
opacity: 0.7;
}
@@ -226,7 +229,7 @@ header {
}
header h1 {
background: linear-gradient(135deg, #4096ff, #ff7a45);
background: linear-gradient(135deg, #66bb6a, #81c784);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
@@ -245,7 +248,7 @@ header h1 {
display: inline-block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
position: relative;
border: 1px dashed rgba(240, 64, 64, 0.3);
border: 1px dashed rgba(129, 199, 132, 0.3);
}
.update-time::before {
@@ -255,7 +258,7 @@ header h1 {
left: -5px;
right: -5px;
bottom: -5px;
border: 1px solid rgba(240, 64, 64, 0.3);
border: 1px solid rgba(129, 199, 132, 0.3);
border-radius: 28px;
animation: pulse-border 2s infinite;
pointer-events: none;
@@ -299,9 +302,9 @@ header h1 {
position: absolute;
top: 5px;
right: 10px;
color: #f04040;
opacity: 0.2;
font-size: 14px;
color: #a5d6a7;
opacity: 0.15;
font-size: 12px;
}
.hot-item::after {
@@ -309,32 +312,33 @@ header h1 {
position: absolute;
bottom: 5px;
left: 10px;
color: #f04040;
opacity: 0.2;
font-size: 14px;
color: #a5d6a7;
opacity: 0.15;
font-size: 12px;
}
.even-item {
border-left: 3px solid #f04040;
border-left: 2px solid #81c784;
}
.odd-item {
border-right: 3px solid #f04040;
border-right: 2px solid #81c784;
}
.title-decoration {
color: #f04040;
font-weight: bold;
color: #81c784;
font-weight: normal;
margin-right: 5px;
display: inline-block;
transform: translateY(1px);
opacity: 0.7;
}
.source-icon, .time-icon {
color: #f04040;
color: #81c784;
font-size: 14px;
margin-right: 3px;
opacity: 0.8;
opacity: 0.6;
}
.hot-title {
@@ -353,17 +357,17 @@ header h1 {
.hot-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
border-color: rgba(64, 169, 255, 0.3);
border-color: rgba(129, 199, 132, 0.4);
}
.hot-rank {
font-size: 1.2rem;
font-weight: bold;
color: #4096ff;
color: #66bb6a;
margin-right: 18px;
min-width: 38px;
text-align: center;
background-color: rgba(64, 169, 255, 0.1);
background-color: rgba(129, 199, 132, 0.1);
border-radius: 50%;
width: 38px;
height: 38px;
@@ -373,17 +377,17 @@ header h1 {
}
.hot-rank.top-1 {
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
background: linear-gradient(135deg, #4caf50, #66bb6a);
color: white;
}
.hot-rank.top-2 {
background: linear-gradient(135deg, #ff7a45, #ffa940);
background: linear-gradient(135deg, #66bb6a, #81c784);
color: white;
}
.hot-rank.top-3 {
background: linear-gradient(135deg, #ffa940, #ffec3d);
background: linear-gradient(135deg, #81c784, #a5d6a7);
color: white;
}
@@ -403,7 +407,7 @@ header h1 {
}
.hot-title:hover {
color: #4096ff;
color: #66bb6a;
text-decoration: none;
}
@@ -431,11 +435,10 @@ footer {
}
.geo-symbol {
color: #f04040;
font-size: 16px;
opacity: 0.7;
color: #a5d6a7;
font-size: 14px;
opacity: 0.5;
transition: all 0.3s ease;
animation: color-shift 5s infinite alternate;
}
.geo-symbol:hover {
@@ -443,17 +446,7 @@ footer {
transform: scale(1.2) rotate(15deg);
}
@keyframes color-shift {
0% {
color: #f04040;
}
50% {
color: #ff7a45;
}
100% {
color: #ff4d4f;
}
}
/* 响应式设计 */
@media (max-width: 1024px) and (min-width: 768px) {
@@ -570,9 +563,9 @@ footer {
.modern-gradient {
background: linear-gradient(
135deg,
rgba(64, 169, 255, 0.3) 0%,
rgba(255, 175, 64, 0.2) 50%,
rgba(255, 122, 69, 0.25) 100%
rgba(168, 230, 207, 0.25) 0%,
rgba(200, 245, 200, 0.15) 50%,
rgba(180, 235, 180, 0.2) 100%
);
}
}