|
<!DOCTYPE html> |
|
<html lang="zh-CN"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>绍兴黄酒 - 文化底蕴</title> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> |
|
|
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap'); |
|
|
|
:root { |
|
--primary-color: #FFB42E; |
|
--secondary-color: #FF8264; |
|
--accent-color: #FF6B6B; |
|
--bg-light: #FFF9F0; |
|
--text-dark: #2D232E; |
|
--text-light: #FFF9F0; |
|
--gradient-1: linear-gradient(135deg, #FFB42E, #FF6B6B); |
|
--gradient-2: linear-gradient(45deg, #FFB42E, #FF8264); |
|
} |
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
font-family: 'Noto Serif SC', serif; |
|
background: var(--bg-light); |
|
color: var(--text-dark); |
|
overflow-x: hidden; |
|
} |
|
|
|
|
|
.navigation { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
padding: 1rem 2rem; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
background: rgba(255, 249, 240, 0.8); |
|
backdrop-filter: blur(10px); |
|
z-index: 1000; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.navigation.scrolled { |
|
background: rgba(255, 249, 240, 0.95); |
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); |
|
padding: 0.8rem 2rem; |
|
} |
|
|
|
.nav-logo { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
text-decoration: none; |
|
} |
|
|
|
.logo-text { |
|
font-size: 1.5rem; |
|
font-weight: bold; |
|
background: var(--gradient-1); |
|
-webkit-background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
position: relative; |
|
} |
|
|
|
.logo-text::after { |
|
content: ''; |
|
position: absolute; |
|
bottom: -5px; |
|
left: 0; |
|
width: 100%; |
|
height: 2px; |
|
background: var(--gradient-1); |
|
transform: scaleX(0); |
|
transition: transform 0.3s ease; |
|
transform-origin: right; |
|
} |
|
|
|
.nav-logo:hover .logo-text::after { |
|
transform: scaleX(1); |
|
transform-origin: left; |
|
} |
|
|
|
.nav-links { |
|
display: flex; |
|
gap: 2rem; |
|
align-items: center; |
|
} |
|
|
|
.nav-link { |
|
text-decoration: none; |
|
color: var(--text-dark); |
|
font-size: 1rem; |
|
padding: 0.8rem 1.5rem; |
|
border-radius: 25px; |
|
transition: all 0.3s ease; |
|
position: relative; |
|
overflow: hidden; |
|
background: transparent; |
|
border: 2px solid transparent; |
|
} |
|
|
|
.nav-link::before { |
|
content: ''; |
|
position: absolute; |
|
inset: 0; |
|
background: var(--gradient-1); |
|
opacity: 0; |
|
transition: all 0.3s ease; |
|
z-index: -1; |
|
} |
|
|
|
.nav-link:hover { |
|
color: white; |
|
border-color: transparent; |
|
} |
|
|
|
.nav-link:hover::before { |
|
opacity: 1; |
|
} |
|
|
|
.nav-link.active { |
|
background: var(--gradient-1); |
|
color: white; |
|
box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3); |
|
} |
|
|
|
|
|
.hero { |
|
min-height: 100vh; |
|
padding-top: 80px; |
|
position: relative; |
|
overflow: hidden; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.hero-content { |
|
width: 100%; |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 2rem; |
|
display: grid; |
|
grid-template-columns: 1fr 1fr; |
|
gap: 4rem; |
|
align-items: center; |
|
position: relative; |
|
z-index: 2; |
|
} |
|
|
|
.hero-text { |
|
position: relative; |
|
} |
|
|
|
.hero-subtitle { |
|
font-size: 1.2rem; |
|
color: var(--accent-color); |
|
margin-bottom: 1rem; |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
.hero-subtitle::before { |
|
content: ''; |
|
width: 50px; |
|
height: 2px; |
|
background: var(--gradient-1); |
|
} |
|
|
|
.hero-title { |
|
font-size: clamp(2.5rem, 5vw, 4rem); |
|
line-height: 1.2; |
|
margin-bottom: 1.5rem; |
|
position: relative; |
|
} |
|
|
|
.hero-title .highlight { |
|
display: inline-block; |
|
position: relative; |
|
color: var(--primary-color); |
|
} |
|
|
|
.hero-title .highlight::after { |
|
content: ''; |
|
position: absolute; |
|
bottom: 5px; |
|
left: 0; |
|
width: 100%; |
|
height: 8px; |
|
background: var(--gradient-1); |
|
opacity: 0.3; |
|
z-index: -1; |
|
} |
|
|
|
.hero-description { |
|
font-size: 1.1rem; |
|
line-height: 1.8; |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
margin-bottom: 2rem; |
|
position: relative; |
|
} |
|
|
|
.hero-cta { |
|
display: flex; |
|
gap: 1.5rem; |
|
margin-top: 2rem; |
|
} |
|
|
|
.cta-button { |
|
padding: 1rem 2rem; |
|
border: none; |
|
border-radius: 30px; |
|
font-size: 1rem; |
|
font-weight: bold; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.cta-primary { |
|
background: var(--gradient-1); |
|
color: white; |
|
box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3); |
|
} |
|
|
|
.cta-primary::after { |
|
content: ''; |
|
position: absolute; |
|
inset: 0; |
|
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent); |
|
opacity: 0; |
|
transition: opacity 0.3s ease; |
|
} |
|
|
|
.cta-primary:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 6px 20px rgba(255, 180, 46, 0.4); |
|
} |
|
|
|
.cta-primary:hover::after { |
|
opacity: 1; |
|
} |
|
|
|
.cta-secondary { |
|
background: transparent; |
|
border: 2px solid var(--primary-color); |
|
color: var(--text-dark); |
|
} |
|
|
|
.cta-secondary:hover { |
|
background: var(--gradient-2); |
|
color: white; |
|
border-color: transparent; |
|
} |
|
|
|
|
|
.hero-decoration { |
|
position: absolute; |
|
inset: 0; |
|
pointer-events: none; |
|
overflow: hidden; |
|
} |
|
|
|
.decoration-circle { |
|
position: absolute; |
|
border-radius: 50%; |
|
background: var(--gradient-1); |
|
opacity: 0.1; |
|
filter: blur(40px); |
|
} |
|
|
|
.circle-1 { |
|
width: 400px; |
|
height: 400px; |
|
top: -100px; |
|
right: -100px; |
|
} |
|
|
|
.circle-2 { |
|
width: 300px; |
|
height: 300px; |
|
bottom: -50px; |
|
left: -50px; |
|
background: var(--gradient-2); |
|
} |
|
|
|
.floating-text { |
|
position: absolute; |
|
font-size: clamp(5rem, 15vw, 10rem); |
|
font-weight: bold; |
|
opacity: 0.03; |
|
white-space: nowrap; |
|
color: var(--text-dark); |
|
} |
|
|
|
.floating-text-1 { |
|
top: 20%; |
|
left: -10%; |
|
transform: rotate(-15deg); |
|
} |
|
|
|
.floating-text-2 { |
|
bottom: 10%; |
|
right: -5%; |
|
transform: rotate(10deg); |
|
} |
|
|
|
|
|
.bg-pattern { |
|
position: absolute; |
|
inset: 0; |
|
background-image: |
|
radial-gradient(circle at 20% 30%, rgba(255, 180, 46, 0.1) 0%, transparent 10%), |
|
radial-gradient(circle at 80% 70%, rgba(255, 107, 107, 0.1) 0%, transparent 10%); |
|
opacity: 0.5; |
|
animation: patternMove 20s linear infinite; |
|
} |
|
|
|
@keyframes patternMove { |
|
0% { |
|
background-position: 0% 0%; |
|
} |
|
100% { |
|
background-position: 100% 100%; |
|
} |
|
} |
|
|
|
|
|
.model-showcase { |
|
position: relative; |
|
width: 100%; |
|
height: 500px; |
|
border-radius: 20px; |
|
overflow: hidden; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); |
|
backdrop-filter: blur(10px); |
|
} |
|
|
|
#model-container canvas { |
|
width: 100% !important; |
|
height: 100% !important; |
|
border-radius: 20px; |
|
} |
|
|
|
</style> |
|
<style> |
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap'); |
|
|
|
:root { |
|
--primary-color: #FFB42E; |
|
--secondary-color: #FF8264; |
|
--accent-color: #FF6B6B; |
|
--bg-light: #FFF9F0; |
|
--text-dark: #2D232E; |
|
--text-light: #FFF9F0; |
|
--gradient-1: linear-gradient(135deg, #FFB42E, #FF6B6B); |
|
--gradient-2: linear-gradient(45deg, #FFB42E, #FF8264); |
|
} |
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
font-family: 'Noto Serif SC', serif; |
|
background: var(--bg-light); |
|
color: var(--text-dark); |
|
overflow-x: hidden; |
|
} |
|
|
|
|
|
.navigation { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
padding: 1rem 2rem; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
background: rgba(255, 249, 240, 0.8); |
|
backdrop-filter: blur(10px); |
|
z-index: 1000; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
|
|
.hero { |
|
min-height: 100vh; |
|
padding-top: 80px; |
|
position: relative; |
|
overflow: hidden; |
|
display: flex; |
|
align-items: center; |
|
background: var(--bg-light); |
|
} |
|
|
|
.hero-content { |
|
width: 100%; |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 2rem; |
|
display: grid; |
|
grid-template-columns: 1fr 1fr; |
|
gap: 4rem; |
|
align-items: center; |
|
position: relative; |
|
z-index: 2; |
|
} |
|
|
|
.hero-text { |
|
position: relative; |
|
} |
|
|
|
.hero-subtitle { |
|
font-size: 1.2rem; |
|
color: var(--accent-color); |
|
margin-bottom: 1rem; |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
.hero-subtitle::before { |
|
content: ''; |
|
width: 50px; |
|
height: 2px; |
|
background: var(--gradient-1); |
|
} |
|
|
|
.hero-title { |
|
font-size: clamp(2.5rem, 5vw, 4rem); |
|
line-height: 1.2; |
|
margin-bottom: 1.5rem; |
|
position: relative; |
|
} |
|
|
|
.hero-title .highlight { |
|
display: inline-block; |
|
position: relative; |
|
color: var(--primary-color); |
|
} |
|
|
|
.hero-description { |
|
font-size: 1.1rem; |
|
line-height: 1.8; |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.model-showcase { |
|
position: relative; |
|
width: 100%; |
|
height: 500px; |
|
border-radius: 20px; |
|
overflow: hidden; |
|
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); |
|
backdrop-filter: blur(10px); |
|
} |
|
|
|
|
|
.hero-decoration { |
|
position: absolute; |
|
inset: 0; |
|
pointer-events: none; |
|
overflow: hidden; |
|
} |
|
|
|
.bg-pattern { |
|
position: absolute; |
|
inset: 0; |
|
background-image: |
|
radial-gradient(circle at 20% 30%, rgba(255, 180, 46, 0.1) 0%, transparent 10%), |
|
radial-gradient(circle at 80% 70%, rgba(255, 107, 107, 0.1) 0%, transparent 10%); |
|
opacity: 0.5; |
|
animation: patternMove 20s linear infinite; |
|
} |
|
|
|
.decoration-circle { |
|
position: absolute; |
|
border-radius: 50%; |
|
background: var(--gradient-1); |
|
opacity: 0.1; |
|
filter: blur(40px); |
|
} |
|
|
|
.circle-1 { |
|
width: 400px; |
|
height: 400px; |
|
top: -100px; |
|
right: -100px; |
|
} |
|
|
|
.circle-2 { |
|
width: 300px; |
|
height: 300px; |
|
bottom: -50px; |
|
left: -50px; |
|
background: var(--gradient-2); |
|
} |
|
|
|
.hero-image { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.hero-image img { |
|
width: 100%; |
|
height: auto; |
|
object-fit: cover; |
|
border-radius: 20px; |
|
} |
|
|
|
.cta-button { |
|
display: inline-block; |
|
padding: 1rem 2rem; |
|
border: none; |
|
border-radius: 30px; |
|
font-size: 1rem; |
|
font-weight: bold; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
text-decoration: none; |
|
} |
|
|
|
.cta-primary { |
|
background: var(--gradient-1); |
|
color: white; |
|
box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3); |
|
} |
|
|
|
.cta-primary:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 6px 20px rgba(255, 180, 46, 0.4); |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<nav class="navigation"> |
|
<a href="index.html" class="nav-logo"> |
|
<span class="logo-text">绍兴黄酒</span> |
|
</a> |
|
<div class="nav-links"> |
|
<a href="culture.html" class="nav-link active">文化底蕴</a> |
|
<a href="products.html" class="nav-link">臻品佳酿</a> |
|
<a href="innovation.html" class="nav-link">创新未来</a> |
|
<a href="contact.html" class="nav-link">联系我们</a> |
|
<a href="shop.html" class="nav-link">立即品鉴</a> |
|
</div> |
|
</nav> |
|
|
|
|
|
<section class="hero"> |
|
|
|
<div class="hero-decoration"> |
|
<div class="bg-pattern"></div> |
|
<div class="decoration-circle circle-1"></div> |
|
<div class="decoration-circle circle-2"></div> |
|
<div class="floating-text floating-text-1">匠心</div> |
|
<div class="floating-text floating-text-2">传承</div> |
|
</div> |
|
|
|
|
|
<div class="hero-content"> |
|
<div class="hero-text"> |
|
<div class="hero-subtitle">千年酿造 · 文化传承</div> |
|
<h1 class="hero-title"> |
|
探寻 <span class="highlight">绍兴黄酒</span><br> |
|
千年文化瑰宝 |
|
</h1> |
|
<p class="hero-description"> |
|
走进绍兴黄酒的世界，感受中国传统酿造艺术的精髓， |
|
探索一段跨越千年的文化瑰宝。每一滴都凝聚着匠人的智慧与岁月的沉淀。 |
|
</p> |
|
<div class="hero-cta"> |
|
<a href="#culture-heritage" class="cta-button cta-primary">了解文化</a> |
|
</div> |
|
</div> |
|
<div class="model-showcase"> |
|
<div class="hero-image"> |
|
<img src="img2/culture-hero.jpg" alt="绍兴黄酒文化展示"> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
|
|
|
|
<section id="culture-heritage" class="culture-section"> |
|
|
|
<style> |
|
.culture-section { |
|
padding: 4rem 0; |
|
background: var(--bg-light); |
|
position: relative; |
|
min-height: 100vh; |
|
display: flex; |
|
align-items: center; |
|
overflow: hidden; |
|
} |
|
|
|
.section-container { |
|
width: 100%; |
|
max-width: 1600px; |
|
margin: 0 auto; |
|
padding: 2rem; |
|
perspective: 2000px; |
|
} |
|
|
|
.timeline { |
|
display: flex; |
|
justify-content: center; |
|
gap: 1.5rem; |
|
height: 600px; |
|
transform-style: preserve-3d; |
|
position: relative; |
|
} |
|
|
|
.timeline-item { |
|
position: relative; |
|
flex: 0.18; |
|
min-width: 100px; |
|
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); |
|
cursor: pointer; |
|
transform-style: preserve-3d; |
|
transform: perspective(1000px) rotateY(10deg) translateZ(0); |
|
} |
|
|
|
|
|
.timeline-item:hover { |
|
flex: 0.6; |
|
transform: perspective(1000px) rotateY(0) translateZ(50px); |
|
} |
|
|
|
|
|
.timeline-item:hover ~ .timeline-item { |
|
flex: 0.12; |
|
transform: perspective(1000px) rotateY(20deg) translateZ(0); |
|
} |
|
|
|
|
|
.timeline-item:has(~ .timeline-item:hover) { |
|
flex: 0.12; |
|
transform: perspective(1000px) rotateY(-20deg) translateZ(0); |
|
} |
|
|
|
.timeline-card { |
|
position: absolute; |
|
inset: 0; |
|
padding: 3rem 2.5rem; |
|
background: white; |
|
border-radius: 24px; |
|
transition: all 0.6s ease; |
|
overflow: hidden; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
|
|
.timeline-card::before { |
|
content: ''; |
|
position: absolute; |
|
left: 0; |
|
top: 0; |
|
bottom: 0; |
|
width: 4px; |
|
border-radius: 2px; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
|
|
.timeline-card-1 { |
|
background: linear-gradient(135deg, #fff 0%, #fff8ef 100%); |
|
box-shadow: 20px 20px 60px rgba(255, 180, 46, 0.1); |
|
} |
|
.timeline-card-1::before { |
|
background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color)); |
|
} |
|
|
|
.timeline-card-2 { |
|
background: linear-gradient(135deg, #fff 0%, #fff4f0 100%); |
|
box-shadow: 20px 20px 60px rgba(255, 107, 107, 0.1); |
|
} |
|
.timeline-card-2::before { |
|
background: linear-gradient(to bottom, var(--secondary-color), var(--accent-color)); |
|
} |
|
|
|
.timeline-card-3 { |
|
background: linear-gradient(135deg, #fff 0%, #fff8f8 100%); |
|
box-shadow: 20px 20px 60px rgba(255, 130, 100, 0.1); |
|
} |
|
.timeline-card-3::before { |
|
background: linear-gradient(to bottom, var(--accent-color), var(--secondary-color)); |
|
} |
|
|
|
.timeline-card-4 { |
|
background: linear-gradient(135deg, #fff 0%, #fff6ef 100%); |
|
box-shadow: 20px 20px 60px rgba(255, 180, 46, 0.1); |
|
} |
|
.timeline-card-4::before { |
|
background: linear-gradient(to bottom, var(--primary-color), var(--accent-color)); |
|
} |
|
|
|
|
|
.timeline-item:hover .timeline-card::before { |
|
width: 6px; |
|
box-shadow: 0 0 20px rgba(var(--primary-color), 0.3); |
|
} |
|
|
|
|
|
.timeline-card::after { |
|
content: ''; |
|
position: absolute; |
|
inset: 1rem; |
|
border-radius: 20px; |
|
box-shadow: inset 0 0 20px rgba(0,0,0,0.05); |
|
pointer-events: none; |
|
opacity: 0; |
|
transition: opacity 0.3s ease; |
|
} |
|
|
|
.timeline-item:hover .timeline-card::after { |
|
opacity: 1; |
|
} |
|
|
|
|
|
.timeline-icon { |
|
width: 72px; |
|
height: 72px; |
|
border-radius: 50%; |
|
background: white; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-bottom: 2rem; |
|
transition: all 0.5s ease; |
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1); |
|
transform: translateZ(20px); |
|
} |
|
|
|
.timeline-item:hover .timeline-icon { |
|
transform: scale(1.1) translateZ(30px); |
|
} |
|
|
|
.timeline-card-1 .timeline-icon { |
|
border: 3px solid var(--primary-color); |
|
color: var(--primary-color); |
|
} |
|
|
|
.timeline-card-2 .timeline-icon { |
|
border: 3px solid var(--secondary-color); |
|
color: var(--secondary-color); |
|
} |
|
|
|
.timeline-card-3 .timeline-icon { |
|
border: 3px solid var(--accent-color); |
|
color: var(--accent-color); |
|
} |
|
|
|
.timeline-card-4 .timeline-icon { |
|
border: 3px solid var(--primary-color); |
|
color: var(--primary-color); |
|
} |
|
|
|
.timeline-icon svg { |
|
width: 36px; |
|
height: 36px; |
|
fill: none; |
|
stroke: currentColor; |
|
stroke-width: 2; |
|
} |
|
|
|
|
|
.timeline-content { |
|
opacity: 0.5; |
|
transition: all 0.5s ease; |
|
overflow: hidden; |
|
flex: 1; |
|
transform-style: preserve-3d; |
|
} |
|
|
|
.timeline-item:hover .timeline-content { |
|
opacity: 1; |
|
transform: translateZ(30px); |
|
} |
|
|
|
.timeline-era { |
|
font-size: 1.8rem; |
|
font-weight: 500; |
|
margin-bottom: 1rem; |
|
transition: all 0.5s ease; |
|
letter-spacing: 0.05em; |
|
} |
|
|
|
.timeline-title { |
|
font-size: 2.4rem; |
|
margin-bottom: 1.5rem; |
|
color: var(--text-dark); |
|
font-weight: 700; |
|
transition: all 0.5s ease; |
|
line-height: 1.2; |
|
transform: translateZ(10px); |
|
} |
|
|
|
.timeline-text { |
|
line-height: 1.8; |
|
color: var(--text-dark); |
|
font-size: 1.4rem; |
|
opacity: 0; |
|
transition: all 0.5s ease; |
|
transform: translateX(-20px) translateZ(0); |
|
} |
|
|
|
.timeline-item:hover .timeline-text { |
|
opacity: 0.85; |
|
transform: translateX(0) translateZ(20px); |
|
} |
|
|
|
|
|
.timeline-item::after { |
|
content: ''; |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
bottom: -40px; |
|
height: 40px; |
|
background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 70%); |
|
opacity: 0; |
|
transition: opacity 0.3s ease; |
|
pointer-events: none; |
|
} |
|
|
|
.timeline-item:hover::after { |
|
opacity: 1; |
|
} |
|
|
|
|
|
@media (max-width: 1400px) { |
|
.timeline { |
|
height: 500px; |
|
} |
|
|
|
.timeline-text { |
|
font-size: 1.2rem; |
|
} |
|
|
|
.timeline-title { |
|
font-size: 2rem; |
|
} |
|
} |
|
|
|
@media (max-width: 1024px) { |
|
.timeline { |
|
flex-direction: column; |
|
height: auto; |
|
gap: 2rem; |
|
} |
|
|
|
.timeline-item { |
|
height: 180px; |
|
width: 100%; |
|
transform: none !important; |
|
} |
|
|
|
.timeline-item:hover { |
|
height: 400px; |
|
} |
|
|
|
.timeline-content { |
|
padding: 0 1rem; |
|
} |
|
|
|
.timeline-icon { |
|
width: 56px; |
|
height: 56px; |
|
} |
|
|
|
.timeline-era { |
|
font-size: 1.4rem; |
|
} |
|
|
|
.timeline-title { |
|
font-size: 1.8rem; |
|
} |
|
|
|
.timeline-text { |
|
font-size: 1.1rem; |
|
} |
|
} |
|
</style> |
|
|
|
<div class="section-container"> |
|
<div class="timeline"> |
|
|
|
<div class="timeline-item"> |
|
<div class="timeline-card timeline-card-1"> |
|
<div class="timeline-icon"> |
|
<svg viewBox="0 0 24 24"> |
|
<path d="M12,3 L17,8 L12,13 L7,8 L12,3 Z"/> |
|
<path d="M12,13 L12,21"/> |
|
</svg> |
|
</div> |
|
<div class="timeline-content"> |
|
<div class="timeline-era">春秋战国</div> |
|
<h3 class="timeline-title">黄酒诞生</h3> |
|
<p class="timeline-text">绍兴黄酒诞生于春秋战国时期，相传越王勾践曾以黄酒犒赏将士。这片土地得天独厚的地理环境与先进的酿酒工艺，开启了黄酒文化的先河。</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="timeline-item"> |
|
<div class="timeline-card timeline-card-2"> |
|
<div class="timeline-icon"> |
|
<svg viewBox="0 0 24 24"> |
|
<path d="M6,4 L18,4 L16,20 L8,20 L6,4 Z"/> |
|
<path d="M4,4 L20,4"/> |
|
<path d="M8,8 L16,8"/> |
|
</svg> |
|
</div> |
|
<div class="timeline-content"> |
|
<div class="timeline-era">唐宋时期</div> |
|
<h3 class="timeline-title">黄酒繁荣</h3> |
|
<p class="timeline-text">唐宋时期，"会稽美酒"享誉天下。当时的文人墨客常以黄酒为题，挥毫泼墨，留下了无数诗词佳作。苏东坡更是亲自改进酿酒工艺，开创了"东坡醉酒"的佳话。</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="timeline-item"> |
|
<div class="timeline-card timeline-card-3"> |
|
<div class="timeline-icon"> |
|
<svg viewBox="0 0 24 24"> |
|
<path d="M9,4 C7,4 5,6 5,8 C5,10 7,12 9,12 L15,12 C17,12 19,14 19,16 C19,18 17,20 15,20"/> |
|
<circle cx="15" cy="16" r="2"/> |
|
<circle cx="9" cy="8" r="2"/> |
|
</svg> |
|
</div> |
|
<div class="timeline-content"> |
|
<div class="timeline-era">明清时代</div> |
|
<h3 class="timeline-title">工艺完善</h3> |
|
<p class="timeline-text">明清时期，绍兴黄酒的酿造工艺臻于完善，形成了独特的"绍兴酿法"。这一时期，黄酒不仅是饮品，更成为了文人雅士交流的重要媒介，见证了无数风雅故事。</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="timeline-item"> |
|
<div class="timeline-card timeline-card-4"> |
|
<div class="timeline-icon"> |
|
<svg viewBox="0 0 24 24"> |
|
<circle cx="12" cy="12" r="9"/> |
|
<path d="M12,7 L12,12 L16,12"/> |
|
</svg> |
|
</div> |
|
<div class="timeline-content"> |
|
<div class="timeline-era">现代发展</div> |
|
<h3 class="timeline-title">创新传承</h3> |
|
<p class="timeline-text">传统与现代的完美融合，绍兴黄酒在保持传统工艺精髓的同时，不断创新。推出适合年轻人口味的新品，让这份千年文化在新时代焕发出璀璨光彩。</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
</body> |
|
</html> |
