@@ -887,18 +707,17 @@
// 创建粒子背景
function createParticles() {
const particlesContainer = document.getElementById('particles');
- const particleCount = 50;
+ const particleCount = 40;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机大小和位置
- const size = Math.random() * 6 + 2;
+ const size = Math.random() * 5 + 2;
const posX = Math.random() * 100;
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`;
@@ -909,14 +728,14 @@
// 金色、银色或钻石色粒子
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)';
+ 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.8)';
- particle.style.boxShadow = '0 0 10px rgba(192, 192, 192, 0.5)';
+ 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.8)';
- particle.style.boxShadow = '0 0 10px rgba(185, 242, 255, 0.5)';
+ particle.style.background = 'rgba(185, 242, 255, 0.7)';
+ particle.style.boxShadow = '0 0 8px rgba(185, 242, 255, 0.4)';
}
particlesContainer.appendChild(particle);
@@ -980,70 +799,29 @@
}
}
- // 自定义光标
- 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) translateZ(100px)';
+ this.style.transform = 'scale(1.05)';
setTimeout(() => {
- this.style.transform = 'scale(1) rotate(0deg) translateZ(60px)';
- }, 500);
+ 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)`;
+ });
});
});