bcbae992a3
This commit introduces a completely redesigned sponsor list page. The previous two-column layout is replaced with a modern, single-column auto-scrolling list that unifies all sponsors. A dynamic canvas animation has been added to the background for a more engaging visual experience. Previous versions of the page have been archived. This update also includes data corrections for sponsor names and minor fixes to the related PPT assets.
130 lines
2.8 KiB
CSS
130 lines
2.8 KiB
CSS
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
color: #fff;
|
|
overflow: hidden; /* 隐藏全局滚动条 */
|
|
}
|
|
|
|
canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: linear-gradient(270deg, #600000, #606000);
|
|
background-size: 600% 600%;
|
|
/* animation: background 30s ease infinite; */
|
|
background: url("sponsor-bg.jpg") no-repeat center center fixed;
|
|
background-size: cover;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin: 0 0 20px;
|
|
position: sticky; /* 保持在页面顶部 */
|
|
top: 0;
|
|
z-index: 1; /* 确保在滚动列表之上 */
|
|
padding: 10px 0;
|
|
background-color: rgb(48, 0, 0, 0.3);
|
|
box-shadow: 0px 8px 4px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 3rem;
|
|
color: #f1c40f;
|
|
text-shadow: 0 0 10px #f39c12;
|
|
animation: pulse 3s infinite alternate ease-in-out;
|
|
}
|
|
|
|
header h2 {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
margin: 0 0 20px;
|
|
color: #87f10f;
|
|
text-shadow: 0 0 10px #25f312;
|
|
animation: bounce 1.5s infinite alternate ease-in-out;
|
|
}
|
|
|
|
.card {
|
|
margin: 32px auto;
|
|
padding: 16px;
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(5px);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
|
width: 90%;
|
|
text-align: center;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.sponsor-item h2 {
|
|
font-size: 4.5rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.sponsor-item p {
|
|
font-size: 4rem;
|
|
margin: 0;
|
|
color: #f1c40f;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.scrolling-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: scroll 240s linear infinite;
|
|
overflow: hidden; /* 确保列表自身不显示滚动条 */
|
|
}
|
|
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateY(3%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
text-shadow: 0 0 10px #f39c12, 0 0 20px #f39c12;
|
|
}
|
|
100% {
|
|
transform: scale(1.2);
|
|
text-shadow: 0 0 20px #f1c40f, 0 0 40px #f39c12;
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0% {
|
|
transform: translateY(0);
|
|
text-shadow: 0 0 10px #25f312, 0 0 20px #87f10f;
|
|
}
|
|
100% {
|
|
transform: translateY(-10px);
|
|
text-shadow: 0 0 20px #87f10f, 0 0 40px #25f312;
|
|
}
|
|
}
|
|
|
|
@keyframes background {
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
} |