609 lines
13 KiB
CSS
609 lines
13 KiB
CSS
/* 文旅产业主题样式 */
|
|
|
|
:root {
|
|
/* 文旅色彩系统 - 融合自然与文化 */
|
|
--mountain-green: #2d5016;
|
|
--bamboo-green: #4a7c59;
|
|
--water-blue: #4a90a4;
|
|
--cloud-white: #f4f7f5;
|
|
--sunset-orange: #e67e22;
|
|
--temple-red: #c0392b;
|
|
--ink-black: #2c3e50;
|
|
--sand-beige: #f5e6d3;
|
|
--tea-green: #95a99c;
|
|
--jade-green: #00a86b;
|
|
|
|
/* 主色调 */
|
|
--primary-color: var(--mountain-green);
|
|
--secondary-color: var(--water-blue);
|
|
--accent-color: var(--sunset-orange);
|
|
--text-primary: var(--ink-black);
|
|
--text-secondary: #5a6c7d;
|
|
--bg-light: var(--cloud-white);
|
|
--bg-sand: var(--sand-beige);
|
|
}
|
|
|
|
/* 中国山水画风格背景 */
|
|
.mountain-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -2;
|
|
background: linear-gradient(180deg,
|
|
#e8f4f8 0%,
|
|
#d4e8e6 30%,
|
|
#b8d4ce 60%,
|
|
#95b8a6 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 动态山峦层次 */
|
|
.mountain-layer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 120%;
|
|
height: 60%;
|
|
background-repeat: repeat-x;
|
|
animation: floatMountains 30s ease-in-out infinite;
|
|
}
|
|
|
|
.mountain-layer.back {
|
|
background: linear-gradient(to top, #7fa08c 0%, transparent 70%);
|
|
clip-path: polygon(
|
|
0% 100%,
|
|
10% 55%, 25% 70%, 40% 50%, 55% 65%,
|
|
70% 45%, 85% 60%, 100% 50%,
|
|
100% 100%
|
|
);
|
|
opacity: 0.3;
|
|
animation-duration: 45s;
|
|
}
|
|
|
|
.mountain-layer.mid {
|
|
background: linear-gradient(to top, #5a8068 0%, transparent 80%);
|
|
clip-path: polygon(
|
|
0% 100%,
|
|
15% 65%, 30% 55%, 45% 70%, 60% 50%,
|
|
75% 60%, 90% 45%, 100% 55%,
|
|
100% 100%
|
|
);
|
|
opacity: 0.5;
|
|
animation-duration: 35s;
|
|
animation-delay: -5s;
|
|
}
|
|
|
|
.mountain-layer.front {
|
|
background: linear-gradient(to top, var(--mountain-green) 0%, transparent 90%);
|
|
clip-path: polygon(
|
|
0% 100%,
|
|
20% 70%, 35% 60%, 50% 75%, 65% 55%,
|
|
80% 65%, 95% 50%, 100% 60%,
|
|
100% 100%
|
|
);
|
|
opacity: 0.7;
|
|
animation-duration: 25s;
|
|
animation-delay: -10s;
|
|
}
|
|
|
|
@keyframes floatMountains {
|
|
0%, 100% { transform: translateX(0) translateY(0); }
|
|
33% { transform: translateX(-5%) translateY(-10px); }
|
|
66% { transform: translateX(5%) translateY(-5px); }
|
|
}
|
|
|
|
/* 云雾效果 */
|
|
.cloud-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.cloud {
|
|
position: absolute;
|
|
background: radial-gradient(ellipse at center,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0.1) 40%,
|
|
transparent 70%);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
animation: floatCloud 20s infinite;
|
|
}
|
|
|
|
.cloud:nth-child(1) {
|
|
width: 300px;
|
|
height: 100px;
|
|
top: 20%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.cloud:nth-child(2) {
|
|
width: 400px;
|
|
height: 120px;
|
|
top: 40%;
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
.cloud:nth-child(3) {
|
|
width: 350px;
|
|
height: 110px;
|
|
top: 60%;
|
|
animation-delay: 10s;
|
|
}
|
|
|
|
@keyframes floatCloud {
|
|
0% {
|
|
transform: translateX(-100px);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 0.6;
|
|
}
|
|
90% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
transform: translateX(calc(100vw + 100px));
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* 竹叶飘落效果 */
|
|
.bamboo-leaves {
|
|
position: fixed;
|
|
top: -10px;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.leaf {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, #4a7c59 0%, #2d5016 100%);
|
|
clip-path: ellipse(40% 50% at 50% 50%);
|
|
animation: fallLeaf 15s linear infinite;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.leaf:nth-child(odd) {
|
|
animation-duration: 18s;
|
|
width: 15px;
|
|
height: 30px;
|
|
}
|
|
|
|
.leaf:nth-child(even) {
|
|
animation-duration: 12s;
|
|
animation-delay: -5s;
|
|
}
|
|
|
|
@keyframes fallLeaf {
|
|
0% {
|
|
transform: translateY(-100px) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 0.7;
|
|
}
|
|
90% {
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: translateY(calc(100vh + 100px)) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* 卷轴式展开效果 */
|
|
.scroll-reveal {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scroll-reveal::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
var(--sand-beige) 10%,
|
|
var(--sand-beige) 90%,
|
|
transparent 100%);
|
|
transform: translateY(-100%);
|
|
transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 2;
|
|
}
|
|
|
|
.scroll-reveal.active::before {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.scroll-content {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: all 0.8s ease 0.5s;
|
|
}
|
|
|
|
.scroll-reveal.active .scroll-content {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 传统纹样边框 */
|
|
.pattern-border {
|
|
position: relative;
|
|
padding: 30px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.pattern-border::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -5px;
|
|
left: -5px;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
var(--temple-red),
|
|
var(--temple-red) 2px,
|
|
transparent 2px,
|
|
transparent 8px
|
|
);
|
|
z-index: -1;
|
|
border-radius: 12px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* 地图探索式导航 */
|
|
.map-navigation {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 500px;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500"><path d="M0,250 Q300,150 600,250 T1200,250" stroke="%234a90a4" stroke-width="2" fill="none" opacity="0.3"/></svg>') center/cover;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.map-point {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: var(--temple-red);
|
|
border-radius: 50% 50% 50% 0;
|
|
transform: rotate(-45deg);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.map-point:hover {
|
|
transform: rotate(-45deg) scale(1.2);
|
|
background: var(--sunset-orange);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.7); }
|
|
50% { box-shadow: 0 0 0 20px rgba(192, 57, 43, 0); }
|
|
}
|
|
|
|
.map-point-label {
|
|
position: absolute;
|
|
top: -30px;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
white-space: nowrap;
|
|
background: var(--ink-black);
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.map-point:hover .map-point-label {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 水墨晕染过渡效果 */
|
|
.ink-transition {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ink-transition::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: radial-gradient(circle, var(--ink-black) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: width 1s ease, height 1s ease;
|
|
opacity: 0.1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ink-transition:hover::after {
|
|
width: 200%;
|
|
height: 200%;
|
|
}
|
|
|
|
/* 文旅项目卡片 */
|
|
.travel-project-card {
|
|
position: relative;
|
|
background: white;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.5s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.travel-project-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 5px;
|
|
background: linear-gradient(90deg,
|
|
var(--temple-red) 0%,
|
|
var(--sunset-orange) 50%,
|
|
var(--jade-green) 100%);
|
|
}
|
|
|
|
.travel-project-card:hover {
|
|
transform: translateY(-10px) scale(1.02);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.project-image-container {
|
|
position: relative;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.travel-project-card:hover .project-image {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.project-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 20px;
|
|
}
|
|
|
|
.travel-project-card:hover .project-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.project-category {
|
|
color: white;
|
|
font-size: 14px;
|
|
background: var(--temple-red);
|
|
padding: 5px 15px;
|
|
border-radius: 20px;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* 导航菜单古典风格 */
|
|
.nav-menu {
|
|
background: linear-gradient(135deg,
|
|
rgba(45, 80, 22, 0.95) 0%,
|
|
rgba(74, 144, 164, 0.95) 100%);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 3px solid var(--temple-red);
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--cloud-white) !important;
|
|
position: relative;
|
|
padding: 10px 20px !important;
|
|
transition: all 0.3s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--sunset-orange);
|
|
transform: translateX(-50%);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.nav-link:hover::after,
|
|
.nav-link.active::after {
|
|
width: 80%;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.btn-travel {
|
|
background: linear-gradient(135deg, var(--temple-red) 0%, var(--sunset-orange) 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 30px;
|
|
border-radius: 25px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-travel::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s ease, height 0.6s ease;
|
|
}
|
|
|
|
.btn-travel:hover::before {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.btn-travel:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(192, 57, 43, 0.3);
|
|
}
|
|
|
|
/* 时间轴样式 - 旅程风格 */
|
|
.journey-timeline {
|
|
position: relative;
|
|
padding: 50px 0;
|
|
}
|
|
|
|
.journey-path {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: linear-gradient(to bottom,
|
|
var(--temple-red) 0%,
|
|
var(--sunset-orange) 50%,
|
|
var(--jade-green) 100%);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.journey-stop {
|
|
position: relative;
|
|
margin: 50px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.journey-stop:nth-child(even) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.stop-marker {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border: 3px solid var(--temple-red);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stop-content {
|
|
width: 45%;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.journey-stop:nth-child(odd) .stop-content {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.journey-stop:nth-child(even) .stop-content {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.journey-path {
|
|
left: 30px;
|
|
}
|
|
|
|
.stop-marker {
|
|
left: 30px;
|
|
}
|
|
|
|
.journey-stop,
|
|
.journey-stop:nth-child(even) {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.stop-content {
|
|
width: calc(100% - 60px);
|
|
margin-left: 60px !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.map-navigation {
|
|
height: 300px;
|
|
}
|
|
}
|
|
|
|
/* 加载动画优化 */
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 标题装饰 */
|
|
.title-decoration {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.title-decoration::before,
|
|
.title-decoration::after {
|
|
content: '❦';
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--temple-red);
|
|
font-size: 24px;
|
|
}
|
|
|
|
.title-decoration::before {
|
|
left: -10px;
|
|
}
|
|
|
|
.title-decoration::after {
|
|
right: -10px;
|
|
} |