Como usar: Animação de Estrelas Cadentes
- A prévia começa com Estrelas cadentes. Use Pausa entre para definir com que raridade cada uma aparece.
- Defina o tamanho do rastro em Tamanho e o ângulo em Vento.
- Escolha Estrelas caindo para formas de estrela que descem e giram.
- Copie o código para uma seção escura.
Estrelas cadentes com um único keyframe
Uma estrela cadente é uma linha fina em gradiente — cauda transparente, cabeça brilhante e luminosa — girada na direção do movimento. O keyframe desloca a estrela pela caixa na primeira parte do ciclo e a mantém escondida no restante, então cada estrela passa como um clarão e depois espera; atrasos diferentes as espalham no tempo.
Mais efeitos estão no Gerador de Animação de Partículas.
Também pesquisado como: estrela cadente css, animação de estrela cadente, animação de meteoro css, animação de céu noturno css, efeito de estrela caindo, animação de estrela css, estrelas cadentes css.
Ferramentas que combinam com: Animação de Estrelas Cadentes
- Efeito de Neve CSS — Deixe a neve cair no seu site nas festas de fim de ano: neve suave ou flocos de neve, uma nevasca leve ou uma tempestade.
- Animação de Chuva CSS — Faça chover em uma página ou seção de destaque, de uma leve garoa a um temporal inclinado.
- Confete Animado CSS — Comemore um lançamento, um cadastro ou um aniversário com confete caindo que balança e gira em cores variadas.
- Gerador de Keyframes CSS — Um editor visual para @keyframes.
Perguntas frequentes
Como fazer uma animação de estrela cadente em CSS?
Anime uma linha fina em gradiente na diagonal pela tela, girada para acompanhar o trajeto, durante a primeira parte do keyframe, e mantenha-a fora da tela no restante. Escolha Estrelas cadentes aqui e copie o código.
Como fazer as estrelas aparecerem com menos frequência?
Aumente o valor de Pausa entre e diminua Quantidade.
Posso usar minha própria imagem de estrela?
Sim — escolha Meu SVG / imagem e envie o arquivo, ou Emoji e digite uma estrela.
Posso instalar o Animação de Estrelas Cadentes como um aplicativo da web e usá-lo offline?
Sim. O Animação de Estrelas Cadentes é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.