EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: #000;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .title {
            color: white;
            font-size: 3.5rem;
            text-align: center;
            margin-bottom: 1rem;
            text-shadow: 0 0 10px #4d79ff, 0 0 20px #4d79ff;
            z-index: 10;
            font-weight: 300;
            letter-spacing: 3px;
        }
        
        .subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.2rem;
            text-align: center;
            margin-bottom: 2rem;
            z-index: 10;
            max-width: 600px;
            line-height: 1.6;
        }
        
        .controls {
            position: absolute;
            bottom: 30px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 20px;
            z-index: 10;
        }
        
        button {
            background: rgba(30, 30, 70, 0.7);
            color: white;
            border: 1px solid #4d79ff;
            padding: 10px 20px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
        }
        
        button:hover {
            background: rgba(77, 121, 255, 0.3);
            box-shadow: 0 0 15px #4d79ff;
        }
        
        .info {
            position: absolute;
            top: 20px;
            right: 20px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            text-align: right;
            z-index: 10;
        }
        
        .stats {
            position: absolute;
            top: 20px;
            left: 20px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">银河流星雨</h1>
        <p class="subtitle">移动鼠标与星星互动，观赏随机出现的流星</p>
        
        <canvas id="galaxyCanvas"></canvas>
        
        <div class="controls">
            <button id="addStars">添加星星</button>
            <button id="removeStars">减少星星</button>
            <button id="addMeteor">手动添加流星</button>
            <button id="reset">重置</button>
        </div>
        
        <div class="info">
            移动鼠标与星星互动<br>
            滚动鼠标调整影响范围
        </div>
        
        <div class="stats">
            星星数量: <span id="starCount">500</span><br>
            流星数量: <span id="meteorCount">0</span><br>
            影响范围: <span id="radiusValue">150</span>px
        </div>
    </div>

// 设置Canvas尺寸为窗口大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// 鼠标位置
        const mouse = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 150,
            isMoving: false
        };

// 星星和流星数组
        let stars = [];
        let meteors = [];
        let starCount = 500;

// 更新统计信息
        function updateStats() {
            document.getElementById('starCount').textContent = stars.length;
            document.getElementById('meteorCount').textContent = meteors.length;
            document.getElementById('radiusValue').textContent = Math.round(mouse.radius);
        }

// 监听鼠标移动
        canvas.addEventListener('mousemove', (e) => {
            mouse.x = e.x;
            mouse.y = e.y;
            mouse.isMoving = true;
            
            // 重置移动状态
            clearTimeout(mouse.moveTimeout);
            mouse.moveTimeout = setTimeout(() => {
                mouse.isMoving = false;
            }, 100);
        });

// 监听鼠标滚轮
        canvas.addEventListener('wheel', (e) => {
            mouse.radius += e.deltaY * 0.1;
            mouse.radius = Math.max(50, Math.min(300, mouse.radius));
            updateStats();
        });

// 按钮事件
        document.getElementById('addStars').addEventListener('click', () => {
            const newStars = Math.min(1000, stars.length + 100);
            for (let i = stars.length; i < newStars; i++) {
                stars.push(new Star());
            }
            updateStats();
        });
        
        document.getElementById('removeStars').addEventListener('click', () => {
            const newStars = Math.max(100, stars.length - 100);
            stars = stars.slice(0, newStars);
            updateStats();
        });
        
        document.getElementById('addMeteor').addEventListener('click', () => {
            meteors.push(new Meteor());
            updateStats();
        });
        
        document.getElementById('reset').addEventListener('click', () => {
            init();
            updateStats();
        });

// 星星类
        class Star {
            constructor() {
                this.reset();
                this.originalX = this.x;
                this.originalY = this.y;
            }
            
            reset() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 2 + 0.5;
                this.brightness = Math.random() * 0.5 + 0.5;
                this.twinkleSpeed = Math.random() * 0.05 + 0.01;
                this.twinkleOffset = Math.random() * Math.PI * 2;
                this.color = this.getRandomStarColor();
                this.returnSpeed = Math.random() * 0.05 + 0.01;
            }
            
            getRandomStarColor() {
                const colors = [
                    {r: 255, g: 255, b: 255}, // 白色
                    {r: 255, g: 255, b: 200}, // 暖白色
                    {r: 200, g: 220, b: 255}, // 冷白色
                    {r: 255, g: 200, b: 200}  // 淡红色
                ];
                return colors[Math.floor(Math.random() * colors.length)];
            }

// 更新星星状态
            update() {
                // 闪烁效果
                this.brightness = 0.5 + Math.sin(Date.now() * this.twinkleSpeed + this.twinkleOffset) * 0.5;
                
                // 鼠标交互效果
                const dx = mouse.x - this.x;
                const dy = mouse.y - this.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance < mouse.radius && mouse.isMoving) {
                    // 鼠标靠近时推开星星
                    const force = (mouse.radius - distance) / mouse.radius;
                    this.x -= dx * force * 0.1;
                    this.y -= dy * force * 0.1;
                } else {
                    // 缓慢返回原始位置
                    const dx = this.originalX - this.x;
                    const dy = this.originalY - this.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    
                    if (dist > 0.5) {
                        this.x += dx * this.returnSpeed;
                        this.y += dy * this.returnSpeed;
                    }
                }
            }

// 绘制星星
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                
                // 创建发光效果
                const gradient = ctx.createRadialGradient(
                    this.x, this.y, 0,
                    this.x, this.y, this.size * 2
                );
                
                gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.brightness})`);
                gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0)`);
                
                ctx.fillStyle = gradient;
                ctx.fill();
            }
        }

// 流星类
        class Meteor {
            constructor() {
                this.reset();
            }
            
            reset() {
                // 流星从屏幕边缘开始
                const side = Math.floor(Math.random() * 4); // 0:上, 1:右, 2:下, 3:左
                
                switch(side) {
                    case 0: // 上边
                        this.x = Math.random() * canvas.width;
                        this.y = -20;
                        break;
                    case 1: // 右边
                        this.x = canvas.width + 20;
                        this.y = Math.random() * canvas.height;
                        break;
                    case 2: // 下边
                        this.x = Math.random() * canvas.width;
                        this.y = canvas.height + 20;
                        break;
                    case 3: // 左边
                        this.x = -20;
                        this.y = Math.random() * canvas.height;
                        break;
                }
                
                // 流星目标方向（指向屏幕中心区域）
                const targetX = canvas.width * 0.3 + Math.random() * canvas.width * 0.4;
                const targetY = canvas.height * 0.3 + Math.random() * canvas.height * 0.4;
                
                // 计算方向向量
                const dx = targetX - this.x;
                const dy = targetY - this.y;
                const length = Math.sqrt(dx * dx + dy * dy);
                
                // 设置速度
                this.speed = Math.random() * 8 + 12;
                this.vx = (dx / length) * this.speed;
                this.vy = (dy / length) * this.speed;
                
                // 流星属性
                this.length = Math.random() * 50 + 30;
                this.width = Math.random() * 3 + 1;
                this.brightness = 1;
                this.fadeSpeed = Math.random() * 0.02 + 0.01;
                this.alive = true;
                
                // 流星颜色
                const colors = [
                    {r: 255, g: 255, b: 255}, // 白色
                    {r: 100, g: 149, b: 237}, // 矢车菊蓝
                    {r: 173, g: 216, b: 230}, // 淡蓝色
                    {r: 255, g: 215, b: 0}   // 金色
                ];
                this.color = colors[Math.floor(Math.random() * colors.length)];
            }

// 更新流星状态
            update() {
                if (!this.alive) return;
                
                // 移动流星
                this.x += this.vx;
                this.y += this.vy;
                
                // 逐渐消失
                this.brightness -= this.fadeSpeed;
                
                // 检查是否超出屏幕或完全消失
                if (this.brightness <= 0 || 
                    this.x < -100 || this.x > canvas.width + 100 || 
                    this.y < -100 || this.y > canvas.height + 100) {
                    this.alive = false;
                }
            }

// 绘制流星
            draw() {
                if (!this.alive) return;
                
                // 计算流星尾部方向
                const angle = Math.atan2(this.vy, this.vx);
                
                // 绘制流星尾部（渐变）
                const gradient = ctx.createLinearGradient(
                    this.x, this.y,
                    this.x - Math.cos(angle) * this.length,
                    this.y - Math.sin(angle) * this.length
                );
                
                gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.brightness})`);
                gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0)`);
                
                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(
                    this.x - Math.cos(angle) * this.length,
                    this.y - Math.sin(angle) * this.length
                );
                ctx.lineWidth = this.width;
                ctx.strokeStyle = gradient;
                ctx.stroke();
                
                // 绘制流星头部（光点）
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.width * 1.5, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.brightness})`;
                ctx.fill();
            }
        }

// 随机生成流星
        function generateRandomMeteor() {
            if (Math.random() < 0.02) { // 每帧有2%的几率生成流星
                meteors.push(new Meteor());
                updateStats();
            }
        }

// 初始化
        function init() {
            stars = [];
            meteors = [];
            
            // 创建星星
            for (let i = 0; i < starCount; i++) {
                stars.push(new Star());
            }
        }

// 动画循环
        function animate() {
            // 清除画布
            ctx.fillStyle = 'rgba(5, 5, 20, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制星星
            for (let i = 0; i < stars.length; i++) {
                stars[i].update();
                stars[i].draw();
            }
            
            // 生成随机流星
            generateRandomMeteor();
            
            // 绘制流星
            for (let i = meteors.length - 1; i >= 0; i--) {
                meteors[i].update();
                meteors[i].draw();
                
                // 移除已消失的流星
                if (!meteors[i].alive) {
                    meteors.splice(i, 1);
                    updateStats();
                }
            }
            
            requestAnimationFrame(animate);
        }

// 窗口大小改变时重置Canvas尺寸
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });

// 启动动画
        init();
        animate();
        updateStats();
    </script>
</body>
</html>

Recommendation

Join Effecthub.com