-
极简美学
+
+
+
奢华极简
简约之中见非凡，空灵之处显意境
@@ -391,29 +655,30 @@
-
-
现代美学
-
采用最新的玻璃态设计，融合微交互与动效
+
+
奢华设计
+
采用顶级设计理念，融合金质元素与精致细节，创造非凡视觉体验
-
-
全响应式
-
在任何设备上都能提供完美的视觉体验
+
+
尊贵体验
+
每一个交互细节都经过精心设计，提供无与伦比的用户体验
-
-
极致性能
-
精心优化的代码确保流畅的动画与快速加载
+
+
艺术美学
+
将网页设计提升到艺术层面，每一个像素都体现着美学追求
选择主题色彩
-
@@ -422,11 +687,11 @@
@@ -435,16 +700,16 @@
// 创建粒子背景
function createParticles() {
const particlesContainer = document.getElementById('particles');
- const particleCount = 30;
+ const particleCount = 40;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机大小和位置
- const size = Math.random() * 10 + 2;
+ const size = Math.random() * 8 + 2;
const posX = Math.random() * 100;
- const duration = Math.random() * 10 + 10;
+ const duration = Math.random() * 10 + 15;
const delay = Math.random() * -20;
particle.style.width = `${size}px`;
@@ -453,20 +718,27 @@
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 colorButtons = document.querySelectorAll('.color-btn');
+ const colorOptions = document.querySelectorAll('.color-option');
- colorButtons.forEach(button => {
- button.addEventListener('click', function() {
+ colorOptions.forEach(option => {
+ option.addEventListener('click', function() {
// 移除所有active类
- colorButtons.forEach(btn => btn.classList.remove('active'));
+ colorOptions.forEach(opt => opt.classList.remove('active'));
- // 添加active类到当前按钮
+ // 添加active类到当前选项
this.classList.add('active');
// 根据选择切换主题
@@ -478,29 +750,34 @@
// 切换主题函数
function changeTheme(theme) {
- const body = document.body;
+ const root = document.documentElement;
- // 移除所有可能的主题类
- body.classList.remove('theme-sunset', 'theme-fire', 'theme-silver');
-
- // 根据主题添加对应的类
- if (theme !== 'default') {
- body.classList.add(`theme-${theme}`);
- }
-
- // 根据主题更新背景渐变
+ // 根据主题更新CSS变量
switch(theme) {
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;
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;
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;
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');
originalText.addEventListener('click', function() {
- this.style.transform = 'scale(1.1)';
+ this.style.transform = 'scale(1.1) rotate(5deg)';
setTimeout(() => {
- this.style.transform = 'scale(1)';
+ 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)`;
+ });
+ });
});