hazme una pagina web tipo futurista, con animaciones futuristicas y un fondo con estrellas, el cual cuando muevas el raton las estrellas se muevan depende donde mueve el cursor, y que se vean 3d
Aquí te dejo un ejemplo básico de cómo podrías crear una página web futurista con estrellas que se mueven dependiendo de la posición del cursor del ratón. Utilizaremos HTML, CSS y JavaScript para lograr esto. **index.html** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Página Futurista</title> <link rel="stylesheet" href="styles.css"> </head> <body> <canvas id="canvas"></canvas> <script src="script.js"></script> </body> </html> ``` **styles.css** ```css body { margin: 0; background-color: #000; } #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #000; } ``` **script.js** ```javascript // Obtener el canvas const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Configurar el canvas canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Función para generar estrellas aleatorias function generarEstrella() { return { x: Math.random() * canvas.width, y: Math.random() * canvas.height, velocidadX: Math.random() * 2 - 1, velocidadY: Math.random() * 2 - 1, tamano: Math.random() * 2 + 1 }; } // Generar un array de estrellas const estrellas = Array(100).fill().map(generarEstrella); // Función para dibujar las estrellas function dibujarEstrellas() { ctx.clearRect(0, 0, canvas.width, canvas.height); estrellas.forEach((estrella, index) => { ctx.beginPath(); ctx.arc(estrella.x, estrella.y, estrella.tamano, 0, 2 * Math.PI); ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.5})`; ctx.fill(); estrella.x += estrella.velocidadX; estrella.y += estrella.velocidadY; // Restar el valor de la velocidad si la estrella sale de la pantalla if (estrella.x < 0 || estrella.x > canvas.width) { estrella.velocidadX = -estrella.velocidadX; } if (estrella.y < 0 || estrella.y > canvas.height) { estrella.velocidadY = -estrella.velocidadY; } }); } // Función para mover las estrellas según la posición del cursor function moverEstrellas(event) { const x = event.clientX; const y = event.clientY; estrellas.forEach((estrella, index) => { const distancia = Math.sqrt(Math.pow(x - estrella.x, 2) + Math.pow(y - estrella.y, 2)); const velocidad = distancia / 100; estrella.velocidadX = (x - estrella.x) / velocidad; estrella.velocidadY = (y - estrella.y) / velocidad; }); } // Agregar evento de movimiento del cursor canvas.addEventListener('mousemove', moverEstrellas); // Dibujar las estrellas setInterval(dibujarEstrellas, 16); // 16ms = 60fps ``` Este código crea un canvas que cubre toda la pantalla y genera un array de estrellas aleatorias. La función `dibujarEstrellas` se encarga de dibujar cada estrella en su posición actual y actualizar su velocidad según la posición del cursor. La función `moverEstrellas` se encarga de actualizar la velocidad de cada estrella según la posición del cursor. Recuerda que este es solo un ejemplo básico y puedes personalizarlo según tus necesidades.