无编辑摘要 |
无编辑摘要 |
||
| 第53行： | 第53行： | ||
padding-bottom: 8px; | padding-bottom: 8px; | ||
border-bottom: 1px solid rgba(0,0,0,0.1); | border-bottom: 1px solid rgba(0,0,0,0.1); | ||
} | |||
/* 添加文字渐变色与悬停放大 */ | |||
.season-block h3 { | |||
background: linear-gradient(120deg, #2c3e50 30%, #3498db 70%); | |||
-webkit-background-clip: text; | |||
background-clip: text; | |||
-webkit-text-fill-color: transparent; | |||
transition: all 0.3s cubic-bezier(0.4,0,0.2,1); | |||
display: inline-block; | |||
transform-origin: left center; | |||
} | |||
/* 悬停文字放大+投影 */ | |||
.season-block:hover h3 { | |||
transform: scale(1.05); | |||
text-shadow: 0 2px 8px rgba(52,152,219,0.2); | |||
} | |||
/* 新增装饰线动画 */ | |||
.decorative-line { | |||
transition: all 0.4s ease; | |||
background: linear-gradient(180deg, | |||
transparent 0%, | |||
currentColor 30%, | |||
currentColor 70%, | |||
transparent 100% | |||
) !important; | |||
} | |||
/* 悬停时线条生长动画 */ | |||
.season-block:hover .decorative-line { | |||
height: 100%; | |||
opacity: 0.8; | |||
background-size: 100% 200%; | |||
animation: lineFlow 1.2s infinite linear; | |||
} | |||
@keyframes lineFlow { | |||
0% { background-position: 0 0; } | |||
100% { background-position: 0 200%; } | |||
} | |||
/* 列表项悬停效果 */ | |||
.season-block li { | |||
position: relative; | |||
padding-left: 12px; | |||
transition: transform 0.2s; | |||
} | |||
.season-block li::before { | |||
content: "▶"; | |||
position: absolute; | |||
left: -15px; | |||
color: currentColor; | |||
opacity: 0; | |||
transition: all 0.3s; | |||
} | |||
/* 悬停时项目符号显现与位移 */ | |||
.season-block li:hover { | |||
transform: translateX(8px); | |||
} | |||
.season-block li:hover::before { | |||
opacity: 0.6; | |||
left: -12px; | |||
} | |||
/* 新增悬浮光影效果 */ | |||
.season-block { | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.season-block::after { | |||
content: ""; | |||
position: absolute; | |||
top: -50%; | |||
left: -50%; | |||
width: 200%; | |||
height: 200%; | |||
background: radial-gradient(circle at 50% 50%, | |||
rgba(255,255,255,0.2) 0%, | |||
rgba(255,255,255,0) 70% | |||
); | |||
transform: translate(var(--mouse-x), var(--mouse-y)); | |||
pointer-events: none; | |||
opacity: 0; | |||
transition: opacity 0.3s; | |||
} | |||
.season-block:hover::after { | |||
opacity: 0.4; | |||
} | |||
/* 链接动态下划线 */ | |||
.season-nav a { | |||
position: relative; | |||
padding-bottom: 2px; | |||
} | |||
.season-nav a::after { | |||
content: ""; | |||
position: absolute; | |||
bottom: 0; | |||
left: 50%; | |||
width: 0; | |||
height: 1px; | |||
background: currentColor; | |||
transition: all 0.3s; | |||
} | |||
.season-nav a:hover::after { | |||
left: 0; | |||
width: 100%; | |||
} | } | ||