@@ -700,17 +886,18 @@
// 创建粒子背景
function createParticles() {
const particlesContainer = document.getElementById('particles');
- const particleCount = 40;
+ const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机大小和位置
- const size = Math.random() * 8 + 2;
+ const size = Math.random() * 6 + 2;
const posX = Math.random() * 100;
- const duration = Math.random() * 10 + 15;
+ const duration = Math.random() * 15 + 20;
const delay = Math.random() * -20;
+ const zDepth = Math.random() * 100;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
@@ -718,11 +905,17 @@
particle.style.animationDuration = `${duration}s`;
particle.style.animationDelay = `${delay}s`;
- // 金色或银色粒子
- if (Math.random() > 0.5) {
- particle.style.background = 'rgba(212, 175, 55, 0.6)';
+ // 金色、银色或钻石色粒子
+ const colorChoice = Math.random();
+ if (colorChoice < 0.4) {
+ particle.style.background = 'rgba(212, 175, 55, 0.8)';
+ particle.style.boxShadow = '0 0 10px rgba(212, 175, 55, 0.5)';
+ } else if (colorChoice < 0.8) {
+ particle.style.background = 'rgba(192, 192, 192, 0.8)';
+ particle.style.boxShadow = '0 0 10px rgba(192, 192, 192, 0.5)';
} else {
- particle.style.background = 'rgba(192, 192, 192, 0.6)';
+ particle.style.background = 'rgba(185, 242, 255, 0.8)';
+ particle.style.boxShadow = '0 0 10px rgba(185, 242, 255, 0.5)';
}
particlesContainer.appendChild(particle);
@@ -754,56 +947,102 @@
// 根据主题更新CSS变量
switch(theme) {
- case 'sunset':
- root.style.setProperty('--dark', '#3a1c71');
- root.style.setProperty('--gold', '#ffaf7b');
- root.style.setProperty('--silver', '#d76d77');
+ 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 'fire':
- root.style.setProperty('--dark', '#1a2a6c');
- root.style.setProperty('--gold', '#fdbb2d');
- root.style.setProperty('--silver', '#b21f1f');
+ 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', '#00416a');
- root.style.setProperty('--gold', '#e4e5e6');
- root.style.setProperty('--silver', '#ffffff');
+ 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', '#2c3e50');
- root.style.setProperty('--gold', '#4ca1af');
- root.style.setProperty('--silver', '#c4e0e5');
+ 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', '#0f172a');
+ root.style.setProperty('--dark', '#0a0a18');
root.style.setProperty('--gold', '#d4af37');
- root.style.setProperty('--silver', '#c0c0c0');
+ root.style.setProperty('--gold-light', '#f6e8b1');
+ root.style.setProperty('--diamond', '#b9f2ff');
}
}
+ // 自定义光标
+ function setupCustomCursor() {
+ const cursor = document.getElementById('cursor');
+ const cursorFollower = document.getElementById('cursor-follower');
+
+ document.addEventListener('mousemove', function(e) {
+ cursor.style.left = e.clientX + 'px';
+ cursor.style.top = e.clientY + 'px';
+
+ setTimeout(() => {
+ cursorFollower.style.left = e.clientX + 'px';
+ cursorFollower.style.top = e.clientY + 'px';
+ }, 100);
+ });
+
+ // 为可点击元素添加光标效果
+ const clickableElements = document.querySelectorAll('a, button, .color-option, .original-text');
+
+ clickableElements.forEach(element => {
+ element.addEventListener('mouseenter', () => {
+ cursor.style.transform = 'translate(-50%, -50%) scale(1.5)';
+ cursorFollower.style.transform = 'translate(-50%, -50%) scale(1.5)';
+ cursorFollower.style.borderColor = 'rgba(212, 175, 55, 0.5)';
+ });
+
+ element.addEventListener('mouseleave', () => {
+ cursor.style.transform = 'translate(-50%, -50%) scale(1)';
+ cursorFollower.style.transform = 'translate(-50%, -50%) scale(1)';
+ cursorFollower.style.borderColor = 'rgba(212, 175, 55, 0.3)';
+ });
+ });
+ }
+
+ // 3D视差效果
+ function setupParallax() {
+ const container = document.querySelector('.container');
+
+ document.addEventListener('mousemove', (e) => {
+ const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+ const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+
+ container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+ });
+
+ // 重置动画当鼠标离开窗口
+ document.addEventListener('mouseleave', () => {
+ container.style.transform = 'rotateY(0deg) rotateX(0deg)';
+ });
+ }
+
// 初始化
document.addEventListener('DOMContentLoaded', function() {
createParticles();
setupThemeToggle();
+ setupCustomCursor();
+ setupParallax();
// 为原始文本添加点击动画
const originalText = document.querySelector('.original-text');
originalText.addEventListener('click', function() {
- this.style.transform = 'scale(1.1) rotate(5deg)';
+ this.style.transform = 'scale(1.1) rotate(5deg) translateZ(100px)';
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)`;
- });
+ this.style.transform = 'scale(1) rotate(0deg) translateZ(60px)';
+ }, 500);
});
});