全面升级亮点 ✨

1. 视觉特效全面增强

  • 动态光源系统：鼠标移动时产生真实光源效果，照亮周围元素
  • 粒子尾迹特效：光标移动时生成彩色粒子轨迹，增强互动反馈
  • 涟漪点击效果：点击屏幕产生水波纹扩散效果
  • 多层景深设计：气泡层(底层) + 粒子层(中层) + 时间球体(上层)

2. 交互体验升级

  • 自定义光标：替换为科幻感光晕光标
  • 元素排斥系统：粒子与气泡均会避开光标轨迹
  • 元素独立控制：可单独开关粒子/气泡系统
  • 球体悬停动画：悬浮球在鼠标悬停时产生放大发光效果

3. 动态内容扩展

  • 智慧名言系统：每小时自动更换哲理名言（共6条精选）
  • 主题切换动画：色彩过渡添加平滑动画效果
  • 动态favicon：使用火箭表情作为浏览器图标
  • 赛博朋克主题：新增炫酷橙色赛博主题

4. 视觉设计优化

  • 中央球体升级：尺寸增大+发光增强+内发光效果
  • 时间文本特效：添加彩虹渐变与文字阴影
  • 控制面板美化：添加表情图标+悬停动效+毛玻璃效果
  • 气泡多样性：随机大小+颜色+速度的气泡系统

5. 性能优化

  • 粒子尾迹自动清理机制
  • 粒子排斥计算优化
  • 动画使用硬件加速

使用指南 🚀

  1. 基础操作：

    • 移动鼠标：观察粒子/气泡避开光标的效果
    • 点击屏幕：产生涟漪扩散动画
    • 切换主题：点击底部不同颜色按钮

  2. 高级控制：

    • 点击✨粒子开关：显示/隐藏粒子系统
    • 点击💧气泡开关：显示/隐藏气泡背景
    • 悬停中央球体：触发放大发光效果

  3. 彩蛋功能：

    • 整点时自动更换哲理名言
    • 浏览器标签页显示动态火箭图标
    • 赛博主题下气泡呈现橙色调

提示：按F11进入全屏模式可获得最佳体验！此壁纸完全依赖现代浏览器技术，无需任何外部资源。

这个升级版壁纸在视觉效果和交互体验上都有质的飞跃，通过多层动态元素和物理模拟效果，创造了深度沉浸式的数字环境！

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超时空互动壁纸</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            overflow: hidden;
            min-height: 100vh;
            background: radial-gradient(circle at 20% 30%, #0f0c29, #302b63, #24243e);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            perspective: 1000px;
            cursor: none;
        }
        
        #particles {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        #bubbles {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
        }
        
        .floating-ball {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 320px;
            height: 320px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #8e2de2, #4a00e0);
            box-shadow: 
                0 0 100px rgba(142, 45, 226, 0.8),
                0 0 180px rgba(74, 0, 224, 0.6),
                inset 0 0 30px rgba(255, 255, 255, 0.3);
            animation: float 6s ease-in-out infinite;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: white;
            text-align: center;
            padding: 30px;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.15);
            transition: all 0.5s ease;
            backdrop-filter: blur(5px);
        }
        
        .floating-ball:hover {
            transform: translate(-50%, -50%) scale(1.05);
            box-shadow: 
                0 0 120px rgba(142, 45, 226, 1),
                0 0 200px rgba(74, 0, 224, 0.8);
        }
        
        .time-display {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
            letter-spacing: 3px;
            background: linear-gradient(to right, #ff7eee, #7ee8fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
        }
        
        .date-display {
            font-size: 1.7rem;
            opacity: 0.9;
            margin-bottom: 25px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        
        .quote {
            font-size: 1.2rem;
            font-style: italic;
            max-width: 80%;
            opacity: 0.8;
            transition: all 0.5s ease;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
        
        .controls {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 90%;
        }
        
        .control-btn {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.25);
            color: white;
            padding: 10px 25px;
            border-radius: 30px;
            cursor: pointer;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .custom-cursor {
            position: fixed;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            mix-blend-mode: screen;
            transition: transform 0.1s ease;
        }
        
        .cursor-trail {
            position: fixed;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            pointer-events: none;
            z-index: 9998;
            transform: translate(-50%, -50%);
            mix-blend-mode: screen;
        }
        
        .light-source {
            position: fixed;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            pointer-events: none;
            z-index: -1;
            transform: translate(-50%, -50%);
            filter: blur(30px);
            opacity: 0.7;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        @keyframes float {
            0% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
            50% { transform: translate(-50%, -50%) translateY(-20px) rotate(3deg); }
            100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
        }
        
        .bubble {
            position: absolute;
            bottom: -100px;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: rise 15s infinite;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(2px);
        }
        
        @keyframes rise {
            0% {
                opacity: 0.3;
                transform: translateY(0) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: translateY(-100vh) rotate(360deg);
            }
        }
        
        .particle-trail {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div id="bubbles"></div>
    <div id="particles"></div>
    
    <div class="floating-ball">
        <div class="time-display" id="time">00:00:00</div>
        <div class="date-display" id="date">2025年6月14日 星期六</div>
        <div class="quote" id="quote">宇宙中唯一不变的是变化本身</div>
    </div>
    
    <div class="controls">
        <div class="control-btn" data-color="purple">
            <span>🌌</span> 深空紫
        </div>
        <div class="control-btn" data-color="cyber">
            <span>🤖</span> 赛博橙
        </div>
        <div class="control-btn" data-color="ocean">
            <span>🌊</span> 海洋蓝
        </div>
        <div class="control-btn" data-color="forest">
            <span>🌲</span> 森林绿
        </div>
        <div class="control-btn" id="particle-btn">
            <span>✨</span> 粒子开关
        </div>
        <div class="control-btn" id="bubble-btn">
            <span>💧</span> 气泡开关
        </div>
    </div>

    <div class="custom-cursor"></div>
    <div class="light-source"></div>

    <script>
        // 名言库
        const quotes = [
            "宇宙中唯一不变的是变化本身",
            "代码如诗，逻辑如歌",
            "探索是人类的终极使命",
            "在数字的海洋中寻找真理",
            "科技是未来的画笔，代码是创造的颜料",
            "每个像素都是可能的开始"
        ];
        
        // 粒子系统
        let particlesEnabled = true;
        let bubblesEnabled = true;
        
        // 创建气泡
        function createBubbles() {
            const container = document.getElementById('bubbles');
            const bubbleCount = 15;
            
            for (let i = 0; i < bubbleCount; i++) {
                const bubble = document.createElement('div');
                bubble.classList.add('bubble');
                
                // 随机大小和位置
                const size = Math.random() * 80 + 20;
                bubble.style.width = `${size}px`;
                bubble.style.height = `${size}px`;
                bubble.style.left = `${Math.random() * 100}%`;
                bubble.style.background = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.random() * 0.2 + 0.05})`;
                
                // 随机动画
                const duration = Math.random() * 20 + 10;
                const delay = Math.random() * 10;
                bubble.style.animation = `rise ${duration}s linear infinite`;
                bubble.style.animationDelay = `${delay}s`;
                
                container.appendChild(bubble);
            }
        }
        
        // 粒子系统创建
        function createParticles() {
            const container = document.getElementById('particles');
            const particleCount = 200;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                particle.style.position = 'absolute';
                
                // 随机大小
                const size = Math.random() * 4 + 1;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机颜色和形状
                const colors = ['#ff7eee', '#7ee8fa', '#80ff72', '#ff9e6d'];
                const color = colors[Math.floor(Math.random() * colors.length)];
                particle.style.background = color;
                particle.style.borderRadius = Math.random() > 0.7 ? '0' : '50%';
                particle.style.boxShadow = `0 0 10px ${color}`;
                
                // 随机位置
                particle.style.left = `${Math.random() * 100}vw`;
                particle.style.top = `${Math.random() * 100}vh`;
                
                // 动画
                const duration = 2000 + Math.random() * 5000;
                particle.animate(
                    [
                        { transform: 'translateY(0)', opacity: Math.random() },
                        { transform: `translateY(${Math.random() > 0.5 ? '-' : ''}${20 + Math.random() * 50}px)`, opacity: Math.random() * 0.5 }
                    ],
                    {
                        duration: duration,
                        iterations: Infinity,
                        direction: 'alternate'
                    }
                );
                
                container.appendChild(particle);
            }
        }
        
        // 创建粒子尾迹
        function createParticleTrail(x, y, color) {
            const trail = document.createElement('div');
            trail.classList.add('particle-trail');
            trail.style.left = `${x}px`;
            trail.style.top = `${y}px`;
            trail.style.background = color;
            trail.style.boxShadow = `0 0 8px ${color}`;
            document.body.appendChild(trail);
            
            // 动画
            trail.animate(
                [
                    { transform: 'scale(1)', opacity: 0.8 },
                    { transform: 'scale(0.1)', opacity: 0 }
                ],
                {
                    duration: 500 + Math.random() * 1000,
                    easing: 'cubic-bezier(0, 0.55, 0.45, 1)'
                }
            ).onfinish = () => {
                trail.remove();
            };
        }
        
        // 更新时间显示
        function updateTime() {
            const now = new Date();
            const timeElement = document.getElementById('time');
            const dateElement = document.getElementById('date');
            const quoteElement = document.getElementById('quote');
            
            // 时间格式化
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            timeElement.textContent = `${hours}:${minutes}:${seconds}`;
            
            // 日期格式化
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const day = now.getDate();
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            const weekday = weekdays[now.getDay()];
            
            dateElement.textContent = `${year}年${month}月${day}日 星期${weekday}`;
            
            // 每小时更换一次名言
            if (now.getMinutes() === 0 && now.getSeconds() === 0) {
                quoteElement.textContent = quotes[Math.floor(Math.random() * quotes.length)];
                quoteElement.animate(
                    [
                        { opacity: 0, transform: 'translateY(20px)' },
                        { opacity: 1, transform: 'translateY(0)' }
                    ],
                    {
                        duration: 1000,
                        easing: 'ease-out'
                    }
                );
            }
        }
        
        // 背景颜色切换
        function setupColorButtons() {
            const buttons = document.querySelectorAll('.control-btn[data-color]');
            
            buttons.forEach(button => {
                button.addEventListener('click', () => {
                    const color = button.getAttribute('data-color');
                    let gradient;
                    
                    switch(color) {
                        case 'cyber':
                            gradient = 'radial-gradient(circle at 20% 30%, #2a0b45, #ff6b00, #ffa600)';
                            break;
                        case 'ocean':
                            gradient = 'radial-gradient(circle at 20% 30%, #0f2027, #203a43, #2c5364)';
                            break;
                        case 'forest':
                            gradient = 'radial-gradient(circle at 20% 30%, #134E5E, #71B280, #1a5a1a)';
                            break;
                        default: // purple
                            gradient = 'radial-gradient(circle at 20% 30%, #0f0c29, #302b63, #24243e)';
                    }
                    
                    document.body.style.background = gradient;
                    
                    // 添加切换动画
                    document.body.animate(
                        [
                            { opacity: 0.8 },
                            { opacity: 1 }
                        ],
                        {
                            duration: 800,
                            easing: 'ease-in-out'
                        }
                    );
                });
            });
            
            // 粒子开关
            document.getElementById('particle-btn').addEventListener('click', () => {
                particlesEnabled = !particlesEnabled;
                const particles = document.querySelectorAll('#particles .particle');
                particles.forEach(p => {
                    p.style.display = particlesEnabled ? 'block' : 'none';
                });
            });
            
            // 气泡开关
            document.getElementById('bubble-btn').addEventListener('click', () => {
                bubblesEnabled = !bubblesEnabled;
                const bubbles = document.querySelectorAll('#bubbles .bubble');
                bubbles.forEach(b => {
                    b.style.display = bubblesEnabled ? 'block' : 'none';
                });
            });
        }
        
        // 自定义光标效果
        function setupCustomCursor() {
            const cursor = document.querySelector('.custom-cursor');
            const lightSource = document.querySelector('.light-source');
            const trailColors = ['#ff7eee', '#7ee8fa', '#80ff72', '#ff9e6d'];
            let lastTrailTime = 0;
            
            document.addEventListener('mousemove', (e) => {
                const mouseX = e.clientX;
                const mouseY = e.clientY;
                
                // 更新自定义光标位置
                cursor.style.left = `${mouseX}px`;
                cursor.style.top = `${mouseY}px`;
                
                // 更新光源位置
                lightSource.style.left = `${mouseX}px`;
                lightSource.style.top = `${mouseY}px`;
                
                // 粒子互动效果
                const particles = document.querySelectorAll('#particles .particle');
                const bubbles = document.querySelectorAll('#bubbles .bubble');
                
                // 创建粒子尾迹（限制频率）
                const now = Date.now();
                if (now - lastTrailTime > 50) {
                    createParticleTrail(
                        mouseX, 
                        mouseY, 
                        trailColors[Math.floor(Math.random() * trailColors.length)]
                    );
                    lastTrailTime = now;
                }
                
                // 粒子排斥效果
                if (particlesEnabled) {
                    particles.forEach(particle => {
                        const rect = particle.getBoundingClientRect();
                        const particleX = rect.left + rect.width / 2;
                        const particleY = rect.top + rect.height / 2;
                        
                        const distance = Math.sqrt(
                            Math.pow(mouseX - particleX, 2) + 
                            Math.pow(mouseY - particleY, 2)
                        );
                        
                        if (distance < 150) {
                            const force = (150 - distance) / 50;
                            const angle = Math.atan2(
                                particleY - mouseY,
                                particleX - mouseX
                            );
                            
                            particle.style.transform = `translate(${Math.cos(angle) * force}px, ${Math.sin(angle) * force}px)`;
                        }
                    });
                }
                
                // 气泡排斥效果
                if (bubblesEnabled) {
                    bubbles.forEach(bubble => {
                        const rect = bubble.getBoundingClientRect();
                        const bubbleX = rect.left + rect.width / 2;
                        const bubbleY = rect.top + rect.height / 2;
                        
                        const distance = Math.sqrt(
                            Math.pow(mouseX - bubbleX, 2) + 
                            Math.pow(mouseY - bubbleY, 2)
                        );
                        
                        if (distance < 200) {
                            const force = (200 - distance) / 80;
                            const angle = Math.atan2(
                                bubbleY - mouseY,
                                bubbleX - mouseX
                            );
                            
                            bubble.style.transform = `translate(${Math.cos(angle) * force}px, ${Math.sin(angle) * force}px)`;
                        }
                    });
                }
            });
            
            // 点击效果
            document.addEventListener('click', (e) => {
                const ripple = document.createElement('div');
                ripple.style.position = 'fixed';
                ripple.style.left = `${e.clientX}px`;
                ripple.style.top = `${e.clientY}px`;
                ripple.style.width = '0';
                ripple.style.height = '0';
                ripple.style.borderRadius = '50%';
                ripple.style.background = 'rgba(255, 255, 255, 0.2)';
                ripple.style.zIndex = '999';
                ripple.style.pointerEvents = 'none';
                document.body.appendChild(ripple);
                
                // 涟漪动画
                ripple.animate(
                    [
                        { width: '0', height: '0', opacity: 1 },
                        { width: '300px', height: '300px', opacity: 0 }
                    ],
                    {
                        duration: 800,
                        easing: 'ease-out'
                    }
                ).onfinish = () => {
                    ripple.remove();
                };
            });
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            createBubbles();
            createParticles();
            updateTime();
            setInterval(updateTime, 1000);
            setupColorButtons();
            setupCustomCursor();
            
            // 初始名言
            document.getElementById('quote').textContent = quotes[Math.floor(Math.random() * quotes.length)];
        });
    </script>
</body>
</html>
  1. About
  2. Contact Us
  3. Privacy
  4. Terms of Service
  5. Copyright Complaint
  6. Language
  7. Legacy mode
  8. Theme
  2. 粤ICP备2021104657号
  3. Worker 0, 15ms
  4. Powered by Hydro v4.14.1 Community