|
|
| 第27行： |
第27行： |
| box-shadow: 0 2px 5px rgba(0,0,0,0.08); | | box-shadow: 0 2px 5px rgba(0,0,0,0.08); |
| transition: transform 0.2s ease; | | transition: transform 0.2s ease; |
| overflow: hidden; /* 新增属性合并 */
| |
| will-change: transform; /* 预声明变化属性 */
| |
| } | | } |
|
| |
|
| 第39行： |
第37行： |
| height: 90%; | | height: 90%; |
| border-radius: 2px; | | border-radius: 2px; |
| transition: transform 0.4s ease, height 0.4s ease; /* 精准控制动画属性 */
| | background: #E67E22; |
| background: linear-gradient(180deg, | |
| transparent 0%,
| |
| currentColor 30%,
| |
| currentColor 70%,
| |
| transparent 100%
| |
| );
| |
| } | | } |
|
| |
|
| /* == 颜色系统定义 == */
| | .color-system-1 .decorative-line { background: #E67E22; } /* 物品系统橙色 */ |
| .color-system-1 .decorative-line { --deco-color: #E67E22; } | | .color-system-2 .decorative-line { background: #3498DB; } /* 游戏机制蓝色 */ |
| .color-system-2 .decorative-line { --deco-color: #3498DB; } | | .color-system-3 .decorative-line { background: #2ECC71; } /* 职业体系绿色 */ |
| .color-system-3 .decorative-line { --deco-color: #2ECC71; } | | .color-system-4 .decorative-line { background: #9B59B6; } /* 终局内容紫色 */ |
| .color-system-4 .decorative-line { --deco-color: #9B59B6; } | | |
| | .season-block:hover { |
| | transform: translateX(5px); |
| | } |
|
| |
|
| /* == 动态效果模块 == */
| |
| /* 标题渐变与悬停 */
| |
| .season-block h3 { | | .season-block h3 { |
| margin: 0 0 12px 0; | | margin: 0 0 12px 0; |
| 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); |
| 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);
| |
| transform-origin: left center;
| |
| }
| |
|
| |
| .season-block:hover h3 {
| |
| transform: scale(1.05);
| |
| text-shadow: 0 2px 8px rgba(52,152,219,0.2);
| |
| }
| |
|
| |
| /* 装饰线动画 */
| |
| .season-block:hover .decorative-line {
| |
| height: 100%;
| |
| opacity: 0.8;
| |
| animation: lineFlow 1.2s infinite linear;
| |
| }
| |
|
| |
| @keyframes lineFlow {
| |
| 0% { background-position: 0 0; }
| |
| 100% { background-position: 0 200%; }
| |
| }
| |
|
| |
| /* 悬浮光影效果 */
| |
| .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)) translateZ(0);
| |
| 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%;
| |
| }
| |
|
| |
| /* == 性能优化模块 == */
| |
| @media (prefers-reduced-motion: reduce) {
| |
| * {
| |
| transition: none !important;
| |
| animation: none !important;
| |
| }
| |
| }
| |
|
| |
| /* == 响应式适配 == */
| |
| @media (max-width: 768px) {
| |
| .season-block {
| |
| padding: 12px 15px;
| |
| margin-bottom: 20px;
| |
| }
| |
|
| |
| .season-block h3 {
| |
| font-size: 1.2em;
| |
| }
| |
| } | | } |