side_projects/ai-beautify
1
0
Fork 0
Code Pull Requests Activity

feat(ui): implement luxury minimalist theme redesign

Browse Source 
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.
This commit is contained in:
xiaomai
2025-09-10 23:40:53 +08:00
parent c0e93dbfc5
commit 0445827207
1 changed files with 473 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

658
index.html
View File

@@ -3,20 +3,30 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>极简美学 - 艺术化网页设计</title> <title>奢华极简 - 艺术网页设计</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <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=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet"> <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> <style>
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Noto Sans SC', sans-serif; }
: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 { body {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); background: linear-gradient(135deg, var(--dark), #1e293b);
color: #f8f8f8; color: var(--light);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -26,114 +36,189 @@
line-height: 1.6; line-height: 1.6;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
font-family: 'Roboto', sans-serif;
} }
/* 背景装饰元素 */ /* 豪华背景效果 */
.bg-decoration { .luxury-bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -1; z-index: -2;
overflow: hidden; overflow: hidden;
} }
.decoration-circle { .luxury-pattern {
position: absolute; position: absolute;
border-radius: 50%; width: 100%;
opacity: 0.1; height: 100%;
background: linear-gradient(135deg, #6e8efb, #a777e3); background-image:
animation: float 15s infinite ease-in-out; 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;
} }
.circle-1 { .gold-line {
width: 300px; position: absolute;
height: 300px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
top: -100px; height: 1px;
left: -100px; width: 100%;
animation-delay: 0s;
} }
.circle-2 { .line-1 {
width: 200px; top: 20%;
height: 200px; animation: lineMove 15s infinite linear;
bottom: -50px;
right: -50px;
animation-delay: -5s;
} }
.circle-3 { .line-2 {
width: 150px;
height: 150px;
top: 50%; top: 50%;
left: 70%; animation: lineMove 12s infinite linear reverse;
animation-delay: -10s;
} }
@keyframes float { .line-3 {
0%, 100% { transform: translate(0, 0) scale(1); } top: 80%;
25% { transform: translate(20px, 30px) scale(1.05); } animation: lineMove 18s infinite linear;
50% { transform: translate(-15px, 15px) scale(0.95); } }
75% { transform: translate(-20px, -10px) scale(1.02); }
@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 { .container {
max-width: 900px; max-width: 1200px;
width: 100%; width: 100%;
background: rgba(255, 255, 255, 0.08); background: rgba(15, 23, 42, 0.7);
border-radius: 25px; border-radius: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); box-shadow:
backdrop-filter: blur(15px); 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); border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
padding: 50px 40px; padding: 60px 40px;
animation: fadeIn 1.5s ease-out; animation: containerAppear 1.5s ease-out;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@keyframes fadeIn { @keyframes containerAppear {
from { opacity: 0; transform: translateY(30px) scale(0.95); } from {
to { opacity: 1; transform: translateY(0) scale(1); } 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 { h1 {
font-size: 3.5rem; font-family: 'Playfair Display', serif;
font-weight: 700; font-size: 4.5rem;
font-weight: 900;
margin-bottom: 20px; margin-bottom: 20px;
background: linear-gradient(to right, #6e8efb, #a777e3, #fc466b); background: linear-gradient(to right, var(--gold), var(--silver), var(--gold));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
letter-spacing: 1px; 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 { .subtitle {
font-size: 1.4rem; font-size: 1.6rem;
color: #ccc; color: var(--silver);
margin-bottom: 40px; margin-bottom: 50px;
font-weight: 300; font-weight: 300;
letter-spacing: 2px;
} }
.divider { .divider {
height: 3px; height: 2px;
width: 100px; width: 150px;
background: linear-gradient(to right, #6e8efb, #a777e3); background: linear-gradient(to right, transparent, var(--gold), transparent);
margin: 0 auto 40px; margin: 0 auto 50px;
border-radius: 3px;
position: relative; position: relative;
} }
.divider::before, .divider::after { .divider::before, .divider::after {
content: ''; content: '✦';
position: absolute; position: absolute;
width: 10px; top: -12px;
height: 10px; color: var(--gold);
border-radius: 50%; font-size: 24px;
background: #6e8efb;
top: -3.5px;
} }
.divider::before { .divider::before {
@@ -147,17 +232,12 @@
.content-box { .content-box {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border-radius: 20px; border-radius: 20px;
padding: 30px; padding: 40px;
margin: 40px 0; margin: 50px 0;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: var(--transition);
}
.content-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
} }
.content-box::before { .content-box::before {
@@ -165,155 +245,298 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 5px; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(to bottom, #6e8efb, #a777e3); 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 { .original-text {
font-size: 2.2rem; font-family: 'Playfair Display', serif;
font-weight: 300; font-size: 3rem;
font-weight: 700;
font-style: italic; font-style: italic;
padding: 20px; padding: 30px 50px;
background: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.3);
border-radius: 15px; border-radius: 15px;
display: inline-block; display: inline-block;
margin: 25px 0; margin: 30px 0;
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid var(--gold);
transition: all 0.3s ease; box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
position: relative;
transition: var(--transition);
cursor: pointer; 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 { .original-text:hover {
background: rgba(255, 255, 255, 0.15); transform: scale(1.05) rotate(1deg);
transform: scale(1.03); box-shadow: 0 0 50px rgba(212, 175, 55, 0.4);
} }
.quote-icon { .quote-icon {
font-size: 1.5rem; font-size: 2rem;
margin: 0 10px; margin: 0 15px;
color: #6e8efb; color: var(--gold);
vertical-align: middle; vertical-align: middle;
} }
.features { .features {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px; gap: 30px;
margin: 50px 0; margin: 60px 0;
} }
.feature { .feature {
background: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.05);
padding: 30px 25px; padding: 40px 30px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease; transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.1); 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 { .feature:hover {
transform: translateY(-8px); transform: translateY(-10px);
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
} }
.feature i { .feature i {
font-size: 3rem; font-size: 3.5rem;
margin-bottom: 20px; margin-bottom: 25px;
background: linear-gradient(to right, #6e8efb, #a777e3); background: linear-gradient(to right, var(--gold), var(--silver));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -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 { .feature h3 {
font-size: 1.4rem; font-size: 1.6rem;
margin-bottom: 15px; margin-bottom: 20px;
color: #fff; color: var(--light);
font-family: 'Playfair Display', serif;
} }
.feature p { .feature p {
color: #ccc; color: #ccc;
font-size: 1rem; font-size: 1.1rem;
line-height: 1.6; line-height: 1.8;
} }
.interactive-section { .interactive-section {
margin: 40px 0; margin: 50px 0;
padding: 30px; padding: 40px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border-radius: 20px; border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
} }
.color-toggle { .interactive-section::before {
display: inline-flex; content: '✦ ✦ ✦';
background: rgba(255, 255, 255, 0.1); position: absolute;
padding: 10px; top: -15px;
border-radius: 50px; left: 50%;
margin: 20px 0; transform: translateX(-50%);
color: var(--gold);
font-size: 24px;
background: var(--dark);
padding: 0 20px;
} }
.color-btn { .color-palette {
width: 40px; display: flex;
height: 40px; justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin: 30px 0;
}
.color-option {
width: 60px;
height: 60px;
border-radius: 50%; border-radius: 50%;
margin: 0 10px;
cursor: pointer; cursor: pointer;
transition: var(--transition);
border: 2px solid transparent; border: 2px solid transparent;
transition: all 0.3s ease; position: relative;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
} }
.color-btn.active { .color-option.active {
border-color: white;
transform: scale(1.1); transform: scale(1.1);
border-color: var(--light);
box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
} }
.color-1 { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); } .color-option::after {
.color-2 { background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b); } content: '✓';
.color-3 { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); } position: absolute;
.color-4 { background: linear-gradient(135deg, #00416a, #e4e5e6); } 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 { footer {
margin-top: 50px; margin-top: 70px;
color: #aaa; color: var(--silver);
text-align: center; text-align: center;
font-size: 0.9rem; 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 { .social-links {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 25px;
margin-top: 20px; margin-top: 30px;
} }
.social-links a { .social-links a {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 45px; width: 60px;
height: 45px; height: 60px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: white; color: var(--light);
font-size: 1.2rem; font-size: 1.5rem;
transition: all 0.3s ease; 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 { .social-links a:hover {
background: linear-gradient(to right, #6e8efb, #a777e3); transform: translateY(-5px) rotate(5deg);
transform: translateY(-3px); 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) { @media (max-width: 768px) {
.container { .container {
padding: 30px 20px; padding: 40px 25px;
} }
h1 { h1 {
font-size: 2.5rem; font-size: 2.8rem;
} }
.subtitle { .subtitle {
@@ -321,12 +544,18 @@
} }
.original-text { .original-text {
font-size: 1.8rem; font-size: 2rem;
padding: 20px 30px;
} }
.features { .features {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.color-option {
width: 50px;
height: 50px;
}
} }
/* 粒子效果 */ /* 粒子效果 */
@@ -342,7 +571,7 @@
.particle { .particle {
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.5);
animation: float-particle 15s infinite linear; animation: float-particle 15s infinite linear;
} }
@@ -362,21 +591,56 @@
opacity: 0; 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> </style>
</head> </head>
<body> <body>
<!-- 背景装饰 --> <!-- 豪华背景 -->
<div class="bg-decoration"> <div class="luxury-bg">
<div class="decoration-circle circle-1"></div> <div class="luxury-pattern"></div>
<div class="decoration-circle circle-2"></div> <div class="gold-line line-1"></div>
<div class="decoration-circle circle-3"></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>
<!-- 粒子背景 --> <!-- 粒子背景 -->
<div class="particles" id="particles"></div> <div class="particles" id="particles"></div>
<!-- 装饰元素 -->
<div class="ornament ornament-1">✦</div>
<div class="ornament ornament-2">✦</div>
<div class="container"> <div class="container">
<h1>极简美学</h1> <div class="gold-border"></div>
<h1>奢华极简</h1>
<p class="subtitle">简约之中见非凡，空灵之处显意境</p> <p class="subtitle">简约之中见非凡，空灵之处显意境</p>
<div class="divider"></div> <div class="divider"></div>
@@ -391,29 +655,30 @@
<div class="features"> <div class="features">
<div class="feature"> <div class="feature">
<i class="fas fa-paint-brush"></i> <i class="fas fa-gem"></i>
<h3>现代美学</h3> <h3>奢华设计</h3>
<p>采用最新的玻璃态设计，融合微交互与动效</p> <p>采用顶级设计理念，融合金质元素与精致细节，创造非凡视觉体验</p>
</div> </div>
<div class="feature"> <div class="feature">
<i class="fas fa-mobile-alt"></i> <i class="fas fa-crown"></i>
<h3>全响应式</h3> <h3>尊贵体验</h3>
<p>在任何设备上都能提供完美的视觉体验</p> <p>每一个交互细节都经过精心设计，提供无与伦比的用户体验</p>
</div> </div>
<div class="feature"> <div class="feature">
<i class="fas fa-bolt"></i> <i class="fas fa-palette"></i>
<h3>极致性能</h3> <h3>艺术美学</h3>
<p>精心优化的代码确保流畅的动画与快速加载</p> <p>将网页设计提升到艺术层面，每一个像素都体现着美学追求</p>
</div> </div>
</div> </div>
<div class="interactive-section"> <div class="interactive-section">
<h3>选择主题色彩</h3> <h3>选择主题色彩</h3>
<div class="color-toggle"> <div class="color-palette">
<div class="color-btn color-1 active" data-theme="default"></div> <div class="color-option theme-1 active" data-theme="default"></div>
<div class="color-btn color-2" data-theme="sunset"></div> <div class="color-option theme-2" data-theme="sunset"></div>
<div class="color-btn color-3" data-theme="fire"></div> <div class="color-option theme-3" data-theme="fire"></div>
<div class="color-btn color-4" data-theme="silver"></div> <div class="color-option theme-4" data-theme="silver"></div>
<div class="color-option theme-5" data-theme="ocean"></div>
</div> </div>
<p>点击上方色块切换页面主题色彩</p> <p>点击上方色块切换页面主题色彩</p>
</div> </div>
@@ -422,11 +687,11 @@
</div> </div>
<footer> <footer>
<p>© 2023 极致简约美学 | 设计于当下，着眼于未来</p> <p>© 2023 奢华极简美学 | 设计于当下，着眼于未来</p>
<div class="social-links"> <div class="social-links">
<a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-dribbble"></i></a> <a href="#"><i class="fab fa-pinterest"></i></a>
<a href="#"><i class="fab fa-github"></i></a> <a href="#"><i class="fab fa-github"></i></a>
</div> </div>
</footer> </footer>
@@ -435,16 +700,16 @@
// 创建粒子背景 // 创建粒子背景
function createParticles() { function createParticles() {
const particlesContainer = document.getElementById('particles'); const particlesContainer = document.getElementById('particles');
const particleCount = 30; const particleCount = 40;
for (let i = 0; i < particleCount; i++) { for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div'); const particle = document.createElement('div');
particle.classList.add('particle'); particle.classList.add('particle');
// 随机大小和位置 // 随机大小和位置
const size = Math.random() * 10 + 2; const size = Math.random() * 8 + 2;
const posX = Math.random() * 100; const posX = Math.random() * 100;
const duration = Math.random() * 10 + 10; const duration = Math.random() * 10 + 15;
const delay = Math.random() * -20; const delay = Math.random() * -20;
particle.style.width = `${size}px`; particle.style.width = `${size}px`;
@@ -453,20 +718,27 @@
particle.style.animationDuration = `${duration}s`; particle.style.animationDuration = `${duration}s`;
particle.style.animationDelay = `${delay}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); particlesContainer.appendChild(particle);
} }
} }
// 主题切换功能 // 主题切换功能
function setupThemeToggle() { function setupThemeToggle() {
const colorButtons = document.querySelectorAll('.color-btn'); const colorOptions = document.querySelectorAll('.color-option');
colorButtons.forEach(button => { colorOptions.forEach(option => {
button.addEventListener('click', function() { option.addEventListener('click', function() {
// 移除所有active类 // 移除所有active类
colorButtons.forEach(btn => btn.classList.remove('active')); colorOptions.forEach(opt => opt.classList.remove('active'));
// 添加active类到当前按钮 // 添加active类到当前选项
this.classList.add('active'); this.classList.add('active');
// 根据选择切换主题 // 根据选择切换主题
@@ -478,29 +750,34 @@
// 切换主题函数 // 切换主题函数
function changeTheme(theme) { function changeTheme(theme) {
const body = document.body; const root = document.documentElement;
// 移除所有可能的主题类 // 根据主题更新CSS变量
body.classList.remove('theme-sunset', 'theme-fire', 'theme-silver');
// 根据主题添加对应的类
if (theme !== 'default') {
body.classList.add(`theme-${theme}`);
}
// 根据主题更新背景渐变
switch(theme) { switch(theme) {
case 'sunset': case 'sunset':
body.style.background = 'linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b)'; root.style.setProperty('--dark', '#3a1c71');
root.style.setProperty('--gold', '#ffaf7b');
root.style.setProperty('--silver', '#d76d77');
break; break;
case 'fire': case 'fire':
body.style.background = 'linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d)'; root.style.setProperty('--dark', '#1a2a6c');
root.style.setProperty('--gold', '#fdbb2d');
root.style.setProperty('--silver', '#b21f1f');
break; break;
case 'silver': case 'silver':
body.style.background = 'linear-gradient(135deg, #00416a, #e4e5e6)'; 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; break;
default: default:
body.style.background = 'linear-gradient(135deg, #0f2027, #203a43, #2c5364)'; root.style.setProperty('--dark', '#0f172a');
root.style.setProperty('--gold', '#d4af37');
root.style.setProperty('--silver', '#c0c0c0');
} }
} }
@@ -512,11 +789,22 @@
// 为原始文本添加点击动画 // 为原始文本添加点击动画
const originalText = document.querySelector('.original-text'); const originalText = document.querySelector('.original-text');
originalText.addEventListener('click', function() { originalText.addEventListener('click', function() {
this.style.transform = 'scale(1.1)'; this.style.transform = 'scale(1.1) rotate(5deg)';
setTimeout(() => { setTimeout(() => {
this.style.transform = 'scale(1)'; this.style.transform = 'scale(1) rotate(0deg)';
}, 300); }, 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> </script>
</body> </body>