Skip to content

Commit 4d2636f

Browse files
HuXin0817HuXin0817
committed
initial commit
1 parent 14e04eb commit 4d2636f

File tree

1 file changed

+163
-4
lines changed

1 file changed

+163
-4
lines changed

‎index.html‎

Lines changed: 163 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,13 @@
122122
-webkit-background-clip: text;
123123
-webkit-text-fill-color: transparent;
124124
background-clip: text;
125+
text-decoration: none;
126+
cursor: pointer;
127+
transition: opacity 0.3s ease;
128+
}
129+
130+
.nav-logo:hover {
131+
opacity: 0.8;
125132
}
126133

127134
.nav-logo-img {
@@ -1015,16 +1022,159 @@
10151022
font-size: 0.8rem;
10161023
}
10171024
}
1025+
1026+
/* 在现有的 body::before 样式后添加流动效果 */
1027+
1028+
/* 流动渐变背景 */
1029+
body::after {
1030+
content: "";
1031+
position: fixed;
1032+
top: 0;
1033+
left: 0;
1034+
width: 100%;
1035+
height: 100%;
1036+
background: linear-gradient(
1037+
45deg,
1038+
rgba(59, 130, 246, 0.1) 0%,
1039+
rgba(147, 51, 234, 0.1) 25%,
1040+
rgba(236, 72, 153, 0.1) 50%,
1041+
rgba(245, 101, 101, 0.1) 75%,
1042+
rgba(59, 130, 246, 0.1) 100%
1043+
);
1044+
background-size: 400% 400%;
1045+
animation: gradientFlow 15s ease infinite;
1046+
z-index: -2;
1047+
opacity: 0.6;
1048+
}
1049+
1050+
@keyframes gradientFlow {
1051+
0% {
1052+
background-position: 0% 50%;
1053+
}
1054+
50% {
1055+
background-position: 100% 50%;
1056+
}
1057+
100% {
1058+
background-position: 0% 50%;
1059+
}
1060+
}
1061+
1062+
/* 为主要元素添加流动边框效果 */
1063+
.main-content {
1064+
position: relative;
1065+
overflow: hidden;
1066+
}
1067+
1068+
.main-content::after {
1069+
content: "";
1070+
position: absolute;
1071+
top: -2px;
1072+
left: -2px;
1073+
right: -2px;
1074+
bottom: -2px;
1075+
background: linear-gradient(
1076+
45deg,
1077+
#3b82f6,
1078+
#8b5cf6,
1079+
#ec4899,
1080+
#f59e0b,
1081+
#10b981,
1082+
#3b82f6
1083+
);
1084+
background-size: 300% 300%;
1085+
animation: borderFlow 8s linear infinite;
1086+
border-radius: 26px;
1087+
z-index: -1;
1088+
}
1089+
1090+
@keyframes borderFlow {
1091+
0% {
1092+
background-position: 0% 50%;
1093+
}
1094+
100% {
1095+
background-position: 300% 50%;
1096+
}
1097+
}
1098+
1099+
/* 为导航栏添加流动效果 */
1100+
.navbar::before {
1101+
content: "";
1102+
position: absolute;
1103+
top: 0;
1104+
left: 0;
1105+
width: 100%;
1106+
height: 1px;
1107+
background: linear-gradient(
1108+
90deg,
1109+
transparent 0%,
1110+
#3b82f6 25%,
1111+
#8b5cf6 50%,
1112+
#ec4899 75%,
1113+
transparent 100%
1114+
);
1115+
background-size: 200% 100%;
1116+
animation: navFlow 4s linear infinite;
1117+
}
1118+
1119+
@keyframes navFlow {
1120+
0% {
1121+
background-position: -200% 0;
1122+
}
1123+
100% {
1124+
background-position: 200% 0;
1125+
}
1126+
}
1127+
1128+
/* 为按钮添加流动效果 */
1129+
.cta-button {
1130+
background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
1131+
background-size: 300% 300%;
1132+
animation: buttonFlow 3s ease infinite;
1133+
}
1134+
1135+
@keyframes buttonFlow {
1136+
0%,
1137+
100% {
1138+
background-position: 0% 50%;
1139+
}
1140+
50% {
1141+
background-position: 100% 50%;
1142+
}
1143+
}
1144+
1145+
/* 为logo添加彩虹旋转效果 */
1146+
.logo::before {
1147+
background: conic-gradient(
1148+
from 0deg,
1149+
#3b82f6,
1150+
#8b5cf6,
1151+
#ec4899,
1152+
#f59e0b,
1153+
#10b981,
1154+
#06b6d4,
1155+
#3b82f6
1156+
);
1157+
animation: rainbowSpin 4s linear infinite;
1158+
}
1159+
1160+
@keyframes rainbowSpin {
1161+
0% {
1162+
transform: rotate(0deg);
1163+
}
1164+
100% {
1165+
transform: rotate(360deg);
1166+
}
1167+
}
10181168
</style>
10191169
</head>
10201170
<body>
10211171
<!-- 导航栏 -->
10221172
<nav class="navbar">
10231173
<div class="nav-content">
1024-
<div class="nav-logo">
1174+
<a href="#" class="nav-logo">
10251175
<img src="RushDB.png" alt="RushDB Logo" class="nav-logo-img" />
10261176
<span>RushDB</span>
1027-
</div>
1177+
</a>
10281178
<ul class="nav-links">
10291179
<li><a href="#about">关于我们</a></li>
10301180
<li><a href="#members">团队成员</a></li>
@@ -1194,7 +1344,7 @@ <h2 class="section-title">竞赛成就</h2>
11941344
target="_blank"
11951345
style="color: inherit; text-decoration: none; display: block"
11961346
>
1197-
<div class="achievement-item">
1347+
<div class="achievement-item featured">
11981348
<div class="achievement-badge">🥇</div>
11991349
<div class="achievement-content">
12001350
<div class="achievement-title">
@@ -1228,7 +1378,7 @@ <h2 class="section-title">项目作品</h2>
12281378
/>
12291379
</div>
12301380
<div class="project-meta">
1231-
<div class="project-title">MiniOB 完善板</div>
1381+
<div class="project-title">MiniOB 完善版</div>
12321382
<div class="project-tags">
12331383
<span class="project-tag">数据库</span>
12341384
<span class="project-tag">C++</span>
@@ -1335,6 +1485,15 @@ <h3 class="contact-subtitle">加入我们的旅程</h3>
13351485
});
13361486
});
13371487

1488+
// 平滑滚动到顶部
1489+
document.querySelector('.nav-logo').addEventListener('click', function(e) {
1490+
e.preventDefault();
1491+
window.scrollTo({
1492+
top: 0,
1493+
behavior: 'smooth'
1494+
});
1495+
});
1496+
13381497
// 滚动时导航栏效果
13391498
window.addEventListener("scroll", () => {
13401499
const navbar = document.querySelector(".navbar");

0 commit comments

Comments
 (0)