| | |
|---|
| | | background-position: center; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | height: 142px; |
|---|
| | | transition: all 0.3s ease; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | animation: cardFadeIn 0.6s ease-out both; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .stat-card:nth-child(1) { animation-delay: 0.1s; } |
|---|
| | | .stat-card:nth-child(2) { animation-delay: 0.2s; } |
|---|
| | | .stat-card:nth-child(3) { animation-delay: 0.3s; } |
|---|
| | | |
|---|
| | | @keyframes cardFadeIn { |
|---|
| | | from { opacity: 0; transform: translateY(20px); } |
|---|
| | | to { opacity: 1; transform: translateY(0); } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .stat-card:hover { |
|---|
| | | transform: translateY(-3px); |
|---|
| | | box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 卡片底部光线 */ |
|---|
| | | .stat-card::after { |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | left: 10%; |
|---|
| | | right: 10%; |
|---|
| | | height: 2px; |
|---|
| | | background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent); |
|---|
| | | opacity: 0; |
|---|
| | | transition: opacity 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .stat-card:hover::after { |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .card-icon { |
|---|
| | | width: 100px; |
|---|
| | | height: 100px; |
|---|
| | | width: 70px; |
|---|
| | | height: 70px; |
|---|
| | | margin: 20px 20px 0 10px; |
|---|
| | | animation: iconFloat 4s ease-in-out infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes iconFloat { |
|---|
| | | 0%, 100% { transform: translateY(0); } |
|---|
| | | 50% { transform: translateY(-5px); } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .card-content { |
|---|
| | |
|---|
| | | |
|---|
| | | .card-value { |
|---|
| | | font-weight: 500; |
|---|
| | | font-size: 40px; |
|---|
| | | font-size: 32px; |
|---|
| | | background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%); |
|---|
| | | -webkit-background-clip: text; |
|---|
| | | -webkit-text-fill-color: transparent; |
|---|
| | | background-clip: text; |
|---|
| | | transition: all 0.3s ease; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .stat-card:hover .card-value { |
|---|
| | | text-shadow: 0 0 15px rgba(0, 212, 255, 0.4); |
|---|
| | | transform: scale(1.05); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .card-label { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 19px; |
|---|
| | | font-size: 16px; |
|---|
| | | color: rgba(208, 231, 255, 0.7); |
|---|
| | | } |
|---|
| | | |
|---|
