WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animação Star Trails
1305
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
22 September 2025
Trecho de animação de neurônio HTML
19 May 2025
animação de avião
11 October 2025
Trecho de animação de carregamento CSS
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; } });