db87f08c1b
This commit completely redesigns the page, shifting from a complex 'luxury' theme to a cleaner, more refined 'elegant' theme. The goal is to improve visual appeal and performance by simplifying effects. Key changes include: - Removed all 3D transforms, mouse-based parallax, and the custom cursor to reduce visual clutter and improve performance. - Replaced heavy shadows, borders, and animations with more subtle and refined effects. - Updated typography to use 'Cormorant Garamond' and 'Montserrat' for a more elegant feel. - Simplified background patterns and decorative elements. - Added a custom-styled scrollbar to match the new theme.
829 lines
26 KiB
HTML
829 lines
26 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=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary: #6e8efb;
|
|
--secondary: #a777e3;
|
|
--accent: #fc466b;
|
|
--dark: #0a0a18;
|
|
--light: #f8fafc;
|
|
--gold: #d4af37;
|
|
--gold-light: #f6e8b1;
|
|
--silver: #c0c0c0;
|
|
--platinum: #e5e4e2;
|
|
--diamond: #b9f2ff;
|
|
--transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--dark), #0f0f2d);
|
|
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: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
/* 优雅背景效果 */
|
|
.elegant-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.elegant-pattern {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.03) 1px, transparent 1px),
|
|
radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
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; }
|
|
}
|
|
|
|
/* 装饰元素 */
|
|
.ornament {
|
|
position: absolute;
|
|
font-size: 40px;
|
|
color: var(--gold);
|
|
opacity: 0.2;
|
|
z-index: -1;
|
|
}
|
|
|
|
.ornament-1 {
|
|
top: 10%;
|
|
left: 10%;
|
|
animation: float 8s infinite ease-in-out;
|
|
}
|
|
|
|
.ornament-2 {
|
|
bottom: 15%;
|
|
right: 12%;
|
|
animation: float 10s infinite ease-in-out reverse;
|
|
}
|
|
|
|
.ornament-3 {
|
|
top: 25%;
|
|
right: 15%;
|
|
animation: float 12s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-15px); }
|
|
}
|
|
|
|
.container {
|
|
max-width: 1100px;
|
|
width: 100%;
|
|
background: rgba(10, 10, 24, 0.7);
|
|
border-radius: 24px;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.1),
|
|
0 20px 40px -12px rgba(0, 0, 0, 0.6),
|
|
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.2s ease-out;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes containerAppear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.gold-border {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 12px;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
border: 1px solid var(--gold);
|
|
border-radius: 16px;
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 4.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(to right, var(--gold), var(--gold-light), var(--diamond), var(--gold));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
letter-spacing: 2px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
h1::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -12px;
|
|
left: 30%;
|
|
width: 40%;
|
|
height: 2px;
|
|
background: linear-gradient(to right, transparent, var(--gold), transparent);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.6rem;
|
|
color: var(--platinum);
|
|
margin-bottom: 50px;
|
|
font-weight: 300;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
width: 180px;
|
|
background: linear-gradient(to right, transparent, var(--gold), transparent);
|
|
margin: 0 auto 50px;
|
|
position: relative;
|
|
}
|
|
|
|
.divider::before, .divider::after {
|
|
content: '✦';
|
|
position: absolute;
|
|
top: -10px;
|
|
color: var(--gold);
|
|
font-size: 22px;
|
|
}
|
|
|
|
.divider::before {
|
|
left: 0;
|
|
}
|
|
|
|
.divider::after {
|
|
right: 0;
|
|
}
|
|
|
|
.content-box {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
margin: 50px 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
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.08), transparent);
|
|
transform: translateX(-100%) skewX(-15deg);
|
|
transition: transform 0.7s ease;
|
|
}
|
|
|
|
.content-box:hover::before {
|
|
transform: translateX(100%) skewX(-15deg);
|
|
}
|
|
|
|
.content-box:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.original-text {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 3rem;
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
padding: 30px 50px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
border-radius: 16px;
|
|
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: -8px;
|
|
left: -8px;
|
|
right: -8px;
|
|
bottom: -8px;
|
|
background: linear-gradient(45deg, var(--gold), var(--diamond), var(--gold));
|
|
z-index: -1;
|
|
border-radius: 20px;
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.original-text:hover::before {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.original-text:hover {
|
|
transform: scale(1.03);
|
|
box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
|
|
}
|
|
|
|
.quote-icon {
|
|
font-size: 2rem;
|
|
margin: 0 15px;
|
|
color: var(--gold);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 30px;
|
|
margin: 60px 0;
|
|
}
|
|
|
|
.feature {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
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.08);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, var(--gold), var(--diamond));
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.feature:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.feature:hover {
|
|
transform: translateY(-8px);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.feature i {
|
|
font-size: 3.2rem;
|
|
margin-bottom: 25px;
|
|
background: linear-gradient(to right, var(--gold), var(--diamond));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.feature i::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--gold);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.feature h3 {
|
|
font-size: 1.6rem;
|
|
margin-bottom: 20px;
|
|
color: var(--light);
|
|
font-family: 'Cormorant Garamond', serif;
|
|
}
|
|
|
|
.feature p {
|
|
color: #ccc;
|
|
font-size: 1.1rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.interactive-section {
|
|
margin: 50px 0;
|
|
padding: 40px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
position: relative;
|
|
}
|
|
|
|
.interactive-section::before {
|
|
content: '✦ ✦ ✦';
|
|
position: absolute;
|
|
top: -18px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: var(--gold);
|
|
font-size: 24px;
|
|
background: var(--dark);
|
|
padding: 0 25px;
|
|
}
|
|
|
|
.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.4);
|
|
}
|
|
|
|
.color-option::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
font-size: 1.8rem;
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.color-option.active::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-1 { background: linear-gradient(135deg, #0a0a18, #0f0f2d, #1a1a40); }
|
|
.theme-2 { background: linear-gradient(135deg, #2d0f2d, #6a1b6d, #9b4b9b); }
|
|
.theme-3 { background: linear-gradient(135deg, #1a1a40, #2d2d7d, #4a4ab8); }
|
|
.theme-4 { background: linear-gradient(135deg, #1c2833, #566573, #85929e); }
|
|
.theme-5 { background: linear-gradient(135deg, #0d3b66, #1e6fa9, #2e86c1); }
|
|
|
|
footer {
|
|
margin-top: 70px;
|
|
color: var(--silver);
|
|
text-align: center;
|
|
font-size: 1.1rem;
|
|
position: relative;
|
|
}
|
|
|
|
footer::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -35px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 250px;
|
|
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.08);
|
|
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(--diamond));
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
z-index: -1;
|
|
}
|
|
|
|
.social-links a:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.social-links a:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1200px) {
|
|
h1 {
|
|
font-size: 3.8rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2.8rem;
|
|
padding: 25px 45px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
h1 {
|
|
font-size: 3.2rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2.4rem;
|
|
padding: 20px 35px;
|
|
}
|
|
|
|
.feature {
|
|
padding: 35px 25px;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.social-links a {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 1.3rem;
|
|
}
|
|
}
|
|
|
|
/* 粒子效果 */
|
|
.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.6);
|
|
animation: float-particle 20s 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;
|
|
}
|
|
}
|
|
|
|
/* 优雅的滚动条 */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(10, 10, 24, 0.8);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(to bottom, var(--gold), var(--diamond));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(to bottom, var(--gold-light), var(--diamond));
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 优雅背景 -->
|
|
<div class="elegant-bg">
|
|
<div class="elegant-pattern"></div>
|
|
<div class="gold-line line-1"></div>
|
|
<div class="gold-line line-2"></div>
|
|
<div class="gold-line line-3"></div>
|
|
</div>
|
|
|
|
<!-- 粒子背景 -->
|
|
<div class="particles" id="particles"></div>
|
|
|
|
<!-- 装饰元素 -->
|
|
<div class="ornament ornament-1">✦</div>
|
|
<div class="ornament ornament-2">❖</div>
|
|
<div class="ornament ornament-3">♚</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="royal"></div>
|
|
<div class="color-option theme-3" data-theme="majestic"></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() * 5 + 2;
|
|
const posX = Math.random() * 100;
|
|
const duration = Math.random() * 15 + 20;
|
|
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`;
|
|
|
|
// 金色、银色或钻石色粒子
|
|
const colorChoice = Math.random();
|
|
if (colorChoice < 0.4) {
|
|
particle.style.background = 'rgba(212, 175, 55, 0.7)';
|
|
particle.style.boxShadow = '0 0 8px rgba(212, 175, 55, 0.4)';
|
|
} else if (colorChoice < 0.8) {
|
|
particle.style.background = 'rgba(192, 192, 192, 0.7)';
|
|
particle.style.boxShadow = '0 0 8px rgba(192, 192, 192, 0.4)';
|
|
} else {
|
|
particle.style.background = 'rgba(185, 242, 255, 0.7)';
|
|
particle.style.boxShadow = '0 0 8px rgba(185, 242, 255, 0.4)';
|
|
}
|
|
|
|
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 'royal':
|
|
root.style.setProperty('--dark', '#2d0f2d');
|
|
root.style.setProperty('--gold', '#9b4b9b');
|
|
root.style.setProperty('--gold-light', '#d6a8d6');
|
|
root.style.setProperty('--diamond', '#f7bef7');
|
|
break;
|
|
case 'majestic':
|
|
root.style.setProperty('--dark', '#1a1a40');
|
|
root.style.setProperty('--gold', '#4a4ab8');
|
|
root.style.setProperty('--gold-light', '#a6a6f6');
|
|
root.style.setProperty('--diamond', '#b9b9ff');
|
|
break;
|
|
case 'silver':
|
|
root.style.setProperty('--dark', '#1c2833');
|
|
root.style.setProperty('--gold', '#85929e');
|
|
root.style.setProperty('--gold-light', '#d0d3d4');
|
|
root.style.setProperty('--diamond', '#f4f6f7');
|
|
break;
|
|
case 'ocean':
|
|
root.style.setProperty('--dark', '#0d3b66');
|
|
root.style.setProperty('--gold', '#2e86c1');
|
|
root.style.setProperty('--gold-light', '#aed6f1');
|
|
root.style.setProperty('--diamond', '#d6eaf8');
|
|
break;
|
|
default:
|
|
root.style.setProperty('--dark', '#0a0a18');
|
|
root.style.setProperty('--gold', '#d4af37');
|
|
root.style.setProperty('--gold-light', '#f6e8b1');
|
|
root.style.setProperty('--diamond', '#b9f2ff');
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
createParticles();
|
|
setupThemeToggle();
|
|
|
|
// 为原始文本添加点击动画
|
|
const originalText = document.querySelector('.original-text');
|
|
originalText.addEventListener('click', function() {
|
|
this.style.transform = 'scale(1.05)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1)';
|
|
}, 300);
|
|
});
|
|
|
|
// 添加滚动效果
|
|
window.addEventListener('scroll', function() {
|
|
const scrolled = window.pageYOffset;
|
|
const parallaxElements = document.querySelectorAll('.feature, .content-box');
|
|
|
|
parallaxElements.forEach(element => {
|
|
const speed = 0.05;
|
|
element.style.transform = `translateY(${scrolled * speed}px)`;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |