0445827207
This commit introduces a complete visual overhaul, replacing the previous minimalist design with a new 'Luxury Minimalism' theme. - **Visuals:** Implemented a new color scheme (gold, silver, dark tones) using CSS variables, updated typography with 'Playfair Display', and added sophisticated background effects like animated lines and diamond patterns. - **Components:** Redesigned all UI elements including the main container, feature cards, and footer with enhanced shadows, borders, and hover animations. - **Interactivity:** Refactored the theme switcher to use CSS variables, added a new 'ocean' theme, and introduced a parallax scroll effect on content sections.
811 lines
25 KiB
HTML
811 lines
25 KiB
HTML
<!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/font-awesome/6.4.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary: #6e8efb;
|
|
--secondary: #a777e3;
|
|
--accent: #fc466b;
|
|
--dark: #0f172a;
|
|
--light: #f8fafc;
|
|
--gold: #d4af37;
|
|
--silver: #c0c0c0;
|
|
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--dark), #1e293b);
|
|
color: var(--light);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
/* 豪华背景效果 */
|
|
.luxury-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.luxury-pattern {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.1) 2px, transparent 2px),
|
|
radial-gradient(circle at 75% 75%, rgba(212, 175, 55, 0.1) 2px, transparent 2px);
|
|
background-size: 50px 50px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.gold-line {
|
|
position: absolute;
|
|
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
|
height: 1px;
|
|
width: 100%;
|
|
}
|
|
|
|
.line-1 {
|
|
top: 20%;
|
|
animation: lineMove 15s infinite linear;
|
|
}
|
|
|
|
.line-2 {
|
|
top: 50%;
|
|
animation: lineMove 12s infinite linear reverse;
|
|
}
|
|
|
|
.line-3 {
|
|
top: 80%;
|
|
animation: lineMove 18s infinite linear;
|
|
}
|
|
|
|
@keyframes lineMove {
|
|
0% { background-position: -1000px 0; }
|
|
100% { background-position: 1000px 0; }
|
|
}
|
|
|
|
/* 钻石装饰 */
|
|
.diamond {
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 80px;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
|
|
transform: rotate(45deg);
|
|
animation: diamondGlow 4s infinite alternate;
|
|
z-index: -1;
|
|
}
|
|
|
|
.diamond::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60%;
|
|
height: 60%;
|
|
top: 20%;
|
|
left: 20%;
|
|
background: rgba(255,255,255,0.4);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.diamond-1 {
|
|
top: 15%;
|
|
left: 10%;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.diamond-2 {
|
|
bottom: 20%;
|
|
right: 15%;
|
|
width: 100px;
|
|
height: 100px;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes diamondGlow {
|
|
0% { opacity: 0.3; box-shadow: 0 0 20px rgba(255,255,255,0.2); }
|
|
100% { opacity: 0.7; box-shadow: 0 0 40px rgba(255,255,255,0.6); }
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
background: rgba(15, 23, 42, 0.7);
|
|
border-radius: 30px;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.1),
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
overflow: hidden;
|
|
text-align: center;
|
|
padding: 60px 40px;
|
|
animation: containerAppear 1.5s ease-out;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes containerAppear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(50px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.gold-border {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
border: 1px solid var(--gold);
|
|
border-radius: 25px;
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 4.5rem;
|
|
font-weight: 900;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(to right, var(--gold), var(--silver), var(--gold));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
letter-spacing: 2px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
h1::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 3px;
|
|
background: linear-gradient(to right, transparent, var(--gold), transparent);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.6rem;
|
|
color: var(--silver);
|
|
margin-bottom: 50px;
|
|
font-weight: 300;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.divider {
|
|
height: 2px;
|
|
width: 150px;
|
|
background: linear-gradient(to right, transparent, var(--gold), transparent);
|
|
margin: 0 auto 50px;
|
|
position: relative;
|
|
}
|
|
|
|
.divider::before, .divider::after {
|
|
content: '✦';
|
|
position: absolute;
|
|
top: -12px;
|
|
color: var(--gold);
|
|
font-size: 24px;
|
|
}
|
|
|
|
.divider::before {
|
|
left: 0;
|
|
}
|
|
|
|
.divider::after {
|
|
right: 0;
|
|
}
|
|
|
|
.content-box {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
margin: 50px 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.content-box::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.1), transparent);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.6s ease;
|
|
}
|
|
|
|
.content-box:hover::before {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.content-box:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.original-text {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
padding: 30px 50px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 15px;
|
|
display: inline-block;
|
|
margin: 30px 0;
|
|
border: 1px solid var(--gold);
|
|
box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
|
|
position: relative;
|
|
transition: var(--transition);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.original-text::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -10px;
|
|
right: -10px;
|
|
bottom: -10px;
|
|
background: linear-gradient(45deg, var(--gold), var(--silver), var(--gold));
|
|
z-index: -1;
|
|
border-radius: 20px;
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.original-text:hover::before {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.original-text:hover {
|
|
transform: scale(1.05) rotate(1deg);
|
|
box-shadow: 0 0 50px rgba(212, 175, 55, 0.4);
|
|
}
|
|
|
|
.quote-icon {
|
|
font-size: 2rem;
|
|
margin: 0 15px;
|
|
color: var(--gold);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
margin: 60px 0;
|
|
}
|
|
|
|
.feature {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 40px 30px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
|
transition: var(--transition);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 5px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, var(--gold), var(--silver));
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.feature:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.feature:hover {
|
|
transform: translateY(-10px);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.feature i {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 25px;
|
|
background: linear-gradient(to right, var(--gold), var(--silver));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.feature i::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--gold);
|
|
}
|
|
|
|
.feature h3 {
|
|
font-size: 1.6rem;
|
|
margin-bottom: 20px;
|
|
color: var(--light);
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
|
|
.feature p {
|
|
color: #ccc;
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.interactive-section {
|
|
margin: 50px 0;
|
|
padding: 40px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.interactive-section::before {
|
|
content: '✦ ✦ ✦';
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: var(--gold);
|
|
font-size: 24px;
|
|
background: var(--dark);
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.color-palette {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.color-option {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.color-option.active {
|
|
transform: scale(1.1);
|
|
border-color: var(--light);
|
|
box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.color-option::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.color-option.active::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-1 { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }
|
|
.theme-2 { background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b); }
|
|
.theme-3 { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); }
|
|
.theme-4 { background: linear-gradient(135deg, #00416a, #e4e5e6); }
|
|
.theme-5 { background: linear-gradient(135deg, #2c3e50, #4ca1af); }
|
|
|
|
footer {
|
|
margin-top: 70px;
|
|
color: var(--silver);
|
|
text-align: center;
|
|
font-size: 1.1rem;
|
|
position: relative;
|
|
}
|
|
|
|
footer::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 200px;
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, var(--gold), transparent);
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 25px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.social-links a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--light);
|
|
font-size: 1.5rem;
|
|
transition: var(--transition);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.social-links a::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, var(--gold), var(--silver));
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
z-index: -1;
|
|
}
|
|
|
|
.social-links a:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.social-links a:hover {
|
|
transform: translateY(-5px) rotate(5deg);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 992px) {
|
|
h1 {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2.5rem;
|
|
padding: 25px 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 40px 25px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2rem;
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
.features {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.color-option {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
|
|
/* 粒子效果 */
|
|
.particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
animation: float-particle 15s infinite linear;
|
|
}
|
|
|
|
@keyframes float-particle {
|
|
0% {
|
|
transform: translateY(0) translateX(0) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-100vh) translateX(100px) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* 豪华装饰元素 */
|
|
.ornament {
|
|
position: absolute;
|
|
font-size: 40px;
|
|
color: var(--gold);
|
|
opacity: 0.3;
|
|
z-index: -1;
|
|
}
|
|
|
|
.ornament-1 {
|
|
top: 5%;
|
|
left: 5%;
|
|
animation: float 8s infinite ease-in-out;
|
|
}
|
|
|
|
.ornament-2 {
|
|
bottom: 10%;
|
|
right: 8%;
|
|
animation: float 10s infinite ease-in-out reverse;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(10deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 豪华背景 -->
|
|
<div class="luxury-bg">
|
|
<div class="luxury-pattern"></div>
|
|
<div class="gold-line line-1"></div>
|
|
<div class="gold-line line-2"></div>
|
|
<div class="gold-line line-3"></div>
|
|
<div class="diamond diamond-1"></div>
|
|
<div class="diamond diamond-2"></div>
|
|
</div>
|
|
|
|
<!-- 粒子背景 -->
|
|
<div class="particles" id="particles"></div>
|
|
|
|
<!-- 装饰元素 -->
|
|
<div class="ornament ornament-1">✦</div>
|
|
<div class="ornament ornament-2">✦</div>
|
|
|
|
<div class="container">
|
|
<div class="gold-border"></div>
|
|
|
|
<h1>奢华极简</h1>
|
|
<p class="subtitle">简约之中见非凡，空灵之处显意境</p>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="content-box">
|
|
<p>原始内容被重新赋予艺术生命：</p>
|
|
<div class="original-text">
|
|
<i class="fas fa-quote-left quote-icon"></i> 啥都没有 <i class="fas fa-quote-right quote-icon"></i>
|
|
</div>
|
|
<p>在极简主义中，空白本身就是一种设计语言</p>
|
|
</div>
|
|
|
|
<div class="features">
|
|
<div class="feature">
|
|
<i class="fas fa-gem"></i>
|
|
<h3>奢华设计</h3>
|
|
<p>采用顶级设计理念，融合金质元素与精致细节，创造非凡视觉体验</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-crown"></i>
|
|
<h3>尊贵体验</h3>
|
|
<p>每一个交互细节都经过精心设计，提供无与伦比的用户体验</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-palette"></i>
|
|
<h3>艺术美学</h3>
|
|
<p>将网页设计提升到艺术层面，每一个像素都体现着美学追求</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="interactive-section">
|
|
<h3>选择主题色彩</h3>
|
|
<div class="color-palette">
|
|
<div class="color-option theme-1 active" data-theme="default"></div>
|
|
<div class="color-option theme-2" data-theme="sunset"></div>
|
|
<div class="color-option theme-3" data-theme="fire"></div>
|
|
<div class="color-option theme-4" data-theme="silver"></div>
|
|
<div class="color-option theme-5" data-theme="ocean"></div>
|
|
</div>
|
|
<p>点击上方色块切换页面主题色彩</p>
|
|
</div>
|
|
|
|
<p class="subtitle">少即是多，空即是满，无即是有</p>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2023 奢华极简美学 | 设计于当下，着眼于未来</p>
|
|
<div class="social-links">
|
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
<a href="#"><i class="fab fa-instagram"></i></a>
|
|
<a href="#"><i class="fab fa-pinterest"></i></a>
|
|
<a href="#"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 创建粒子背景
|
|
function createParticles() {
|
|
const particlesContainer = document.getElementById('particles');
|
|
const particleCount = 40;
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
|
|
// 随机大小和位置
|
|
const size = Math.random() * 8 + 2;
|
|
const posX = Math.random() * 100;
|
|
const duration = Math.random() * 10 + 15;
|
|
const delay = Math.random() * -20;
|
|
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
particle.style.left = `${posX}%`;
|
|
particle.style.animationDuration = `${duration}s`;
|
|
particle.style.animationDelay = `${delay}s`;
|
|
|
|
// 金色或银色粒子
|
|
if (Math.random() > 0.5) {
|
|
particle.style.background = 'rgba(212, 175, 55, 0.6)';
|
|
} else {
|
|
particle.style.background = 'rgba(192, 192, 192, 0.6)';
|
|
}
|
|
|
|
particlesContainer.appendChild(particle);
|
|
}
|
|
}
|
|
|
|
// 主题切换功能
|
|
function setupThemeToggle() {
|
|
const colorOptions = document.querySelectorAll('.color-option');
|
|
|
|
colorOptions.forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
// 移除所有active类
|
|
colorOptions.forEach(opt => opt.classList.remove('active'));
|
|
|
|
// 添加active类到当前选项
|
|
this.classList.add('active');
|
|
|
|
// 根据选择切换主题
|
|
const theme = this.getAttribute('data-theme');
|
|
changeTheme(theme);
|
|
});
|
|
});
|
|
}
|
|
|
|
// 切换主题函数
|
|
function changeTheme(theme) {
|
|
const root = document.documentElement;
|
|
|
|
// 根据主题更新CSS变量
|
|
switch(theme) {
|
|
case 'sunset':
|
|
root.style.setProperty('--dark', '#3a1c71');
|
|
root.style.setProperty('--gold', '#ffaf7b');
|
|
root.style.setProperty('--silver', '#d76d77');
|
|
break;
|
|
case 'fire':
|
|
root.style.setProperty('--dark', '#1a2a6c');
|
|
root.style.setProperty('--gold', '#fdbb2d');
|
|
root.style.setProperty('--silver', '#b21f1f');
|
|
break;
|
|
case 'silver':
|
|
root.style.setProperty('--dark', '#00416a');
|
|
root.style.setProperty('--gold', '#e4e5e6');
|
|
root.style.setProperty('--silver', '#ffffff');
|
|
break;
|
|
case 'ocean':
|
|
root.style.setProperty('--dark', '#2c3e50');
|
|
root.style.setProperty('--gold', '#4ca1af');
|
|
root.style.setProperty('--silver', '#c4e0e5');
|
|
break;
|
|
default:
|
|
root.style.setProperty('--dark', '#0f172a');
|
|
root.style.setProperty('--gold', '#d4af37');
|
|
root.style.setProperty('--silver', '#c0c0c0');
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
createParticles();
|
|
setupThemeToggle();
|
|
|
|
// 为原始文本添加点击动画
|
|
const originalText = document.querySelector('.original-text');
|
|
originalText.addEventListener('click', function() {
|
|
this.style.transform = 'scale(1.1) rotate(5deg)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1) rotate(0deg)';
|
|
}, 300);
|
|
});
|
|
|
|
// 添加滚动视差效果
|
|
window.addEventListener('scroll', function() {
|
|
const scrolled = window.pageYOffset;
|
|
const parallaxElements = document.querySelectorAll('.feature, .content-box');
|
|
|
|
parallaxElements.forEach(element => {
|
|
const speed = 0.1;
|
|
element.style.transform = `translateY(${scrolled * speed}px)`;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |