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
1480
ledoc
Abrir en el editor
Video
Publica tu código
0
Recomendado
8 June 2025
juego de lanzamiento de moneda
19 May 2025
tarjeta de caja flexible
3 July 2025
Un código de Mete
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; } });