|
|
@@ -27,35 +27,58 @@
|
|
|
|
|
|
/* 容器：卡片主体 */
|
|
|
.card-container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 96%;
|
|
|
+ height: 96%;
|
|
|
border-radius: 30px;
|
|
|
- overflow: hidden;
|
|
|
+ overflow: hidden;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
- /* 背景图：本地图片 */
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 4px 8px rgba(0,0,0,0.25);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 背景图层 (动画加速) */
|
|
|
+ .card-container::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0; left: 0; width: 100%; height: 100%;
|
|
|
+
|
|
|
background: url('./bgkt.jpg') center/cover no-repeat;
|
|
|
- box-shadow: 0 10px 25px rgba(0,0,0,0.15);
|
|
|
- border: 6px solid #fff;
|
|
|
+
|
|
|
+ z-index: 0;
|
|
|
+
|
|
|
+ /* 修改：将时间从 25s 改为 12s，速度翻倍 */
|
|
|
+ animation: bgPan 6s ease-in-out infinite alternate;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 背景移动动画 */
|
|
|
+ @keyframes bgPan {
|
|
|
+ 0% {
|
|
|
+ /* 向左移动 */
|
|
|
+ transform: scale(1.15) translate3d(-3%, 0, 0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ /* 向右移动 */
|
|
|
+ transform: scale(1.15) translate3d(3%, 0, 0);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- /* 遮罩层：大幅减弱白色渐变，让蓝天绿地更明显 */
|
|
|
+ /* 遮罩层 */
|
|
|
.card-container::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
|
- /* 顶部完全透明，只在最底部加一点点淡淡的白光 */
|
|
|
background: linear-gradient(to bottom,
|
|
|
rgba(255,255,255,0) 0%,
|
|
|
rgba(255,255,255,0) 50%,
|
|
|
rgba(255,255,255,0.4) 100%);
|
|
|
- z-index: 1;
|
|
|
- pointer-events: none; /* 让点击穿透 */
|
|
|
+ z-index: 1;
|
|
|
+ pointer-events: none;
|
|
|
}
|
|
|
|
|
|
.card-container:active {
|
|
|
- transform: scale(0.96) rotate(-1deg);
|
|
|
- transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+ transform: scale(0.97);
|
|
|
+ transition: transform 0.1s;
|
|
|
}
|
|
|
|
|
|
.content-layer {
|
|
|
@@ -64,7 +87,7 @@
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- z-index: 2;
|
|
|
+ z-index: 3;
|
|
|
}
|
|
|
|
|
|
/* 年份标签 */
|
|
|
@@ -87,13 +110,9 @@
|
|
|
font-weight: 900;
|
|
|
line-height: 1;
|
|
|
margin-top: 2%;
|
|
|
-
|
|
|
- /* 字体渐变 */
|
|
|
background: linear-gradient(180deg, #FF6B6B 0%, #FF9F43 100%);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
-
|
|
|
- /* 增强投影，确保在背景图上清晰可见 */
|
|
|
filter: drop-shadow(0 4px 0px rgba(255,255,255,1)) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
|
|
|
}
|
|
|
|
|
|
@@ -129,7 +148,6 @@
|
|
|
font-weight: 800;
|
|
|
font-size: 4.5vmin;
|
|
|
letter-spacing: 1px;
|
|
|
- /* 加个半透明白色背景，防止背景太花看不清字 */
|
|
|
background: rgba(255, 255, 255, 0.85);
|
|
|
padding: 8px 20px;
|
|
|
border-radius: 30px;
|
|
|
@@ -142,8 +160,8 @@
|
|
|
position: absolute;
|
|
|
background: #fff;
|
|
|
border-radius: 50%;
|
|
|
- z-index: 1;
|
|
|
- opacity: 0.95; /* 更不透明，像棉花糖 */
|
|
|
+ z-index: 2;
|
|
|
+ opacity: 0.95;
|
|
|
box-shadow: 0 8px 5px rgba(0,0,0,0.05);
|
|
|
}
|
|
|
|
|
|
@@ -174,12 +192,11 @@
|
|
|
<body>
|
|
|
|
|
|
<div class="card-container" onclick="redirectToDetail()">
|
|
|
- <!-- 装饰背景云 -->
|
|
|
<div class="cloud c1"></div>
|
|
|
<div class="cloud c2"></div>
|
|
|
|
|
|
<div class="content-layer">
|
|
|
- <div class="year-tag">2025 · 亲子定向赛</div>
|
|
|
+ <div class="year-tag">2025 · 定向亲子月</div>
|
|
|
<div class="month-num">12</div>
|
|
|
<div class="trophy-icon">
|
|
|
<i class="fa-solid fa-star"></i>
|
|
|
@@ -207,7 +224,7 @@
|
|
|
Logger.init(env === 'mock');
|
|
|
|
|
|
function getTargetDetail() {
|
|
|
- if (Math.random() < 0.3) return 'detail.html';
|
|
|
+ if (Math.random() < 1) return 'detail.html';
|
|
|
const now = new Date();
|
|
|
const month = now.getMonth() + 1;
|
|
|
const date = now.getDate();
|
Your Name