WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación de rastros de estrellas
1484
ledoc
Abrir en el editor
Video
Publica tu código
0
Recomendado
11 September 2025
Capas de animación CSS: Alerta y alegría
11 October 2025
Fragmento de animación de carga de CSS
22 September 2025
Juego de cubo 3D HTML con estadísticas y personalización
HTML
Copy
Move your mouse around
CSS
Copy
@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap"); .star { transform-style: preserve-3d; width: 1px; height: 1px; position: absolute; color: red; } .star:before { position: absolute; content: "✦"; color: inherit; inset: 0; text-shadow: 0 0 0.8em #fff5; } .cd__main { margin: 0; min-height: 100vh; font-family: "Montserrat", sans-serif; color: #F9F6EF; display: grid; place-content: center; background-image: radial-gradient(circle at 50% 50%, #2f3040, #1f2020) !important; }
JS
Copy
let x1=0, y1=0; window.client const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0), dist_to_draw = 50, delay = 1000, fsize = [ '1.1rem', '1.4rem', '.8rem', '1.7rem' ], colors = [ '#E23636', '#F9F3EE', '#E1F8DC', '#B8AFE6', '#AEE1CD', '#5EB0E5' ], rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min, selRand = (o) => o[rand(0, o.length -1)], distanceTo = (x1, y1, x2, y2) => Math.sqrt((Math.pow(x2-x1,2))+(Math.pow(y2-y1,2))), shouldDraw = (x, y) => (distanceTo(x1, y1, x, y) >= dist_to_draw), addStr = (x, y) => { const str = document.createElement("div"); str.innerHTML = '✦'; str.className = 'star'; str.style.top = `${y + rand(-20,20)}px`; str.style.left = `${x}px`; str.style.color = selRand(colors); str.style.fontSize = selRand(fsize); document.body.appendChild(str); const fs = 10 + 5 * parseFloat(getComputedStyle(str).fontSize); str.animate({ translate: `0 ${(y+fs)>vh?vh-y:fs}px`, opacity: 0, transform: `rotateX(${rand(1, 500)}deg) rotateY(${rand(1, 500)}deg)` }, { duration: delay, fill: 'forwards', }); setTimeout(() => { str.remove(); }, delay); } addEventListener("mousemove", (e) => { const {clientX, clientY} = e; if(shouldDraw(clientX, clientY)){ addStr(clientX, clientY); x1 = clientX; y1 = clientY; } });