Fração de Animação

Abrir no Editor Publique Seu Código

Recomendado

28 May 2025

Animação de árvore de Natal em SVG com JavaScript

19 May 2025

* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #042104;
    animation: animateBgColor 4s linear infinite;
}
.loader{
    position: relative;
}
.loader span{
    position: absolute;
    top: 0;
    left: -200px;
    width: 200px;
    transform-origin: right;
    transform: rotate(calc(18deg * var(--i)));
}
.loader span::before{
    content: '';
    position: absolute;
    left: 0;
    width: 150px;
    height: 15px;
    background: hsl(0, 100%, 50%);
    border-radius: 50%;
    animation: animate 5s linear infinite;
    animation-delay: calc(-0.1s * var(--i));
    box-shadow: 0 0 20px #00ff0a,
                0 0 40px #00ff0a,
                0 0 60px #00ff0a,
                0 0 80px #00ff0a,
                0 0 100px #00ff0a,
                0 0 120px #00ff0a;
}

@keyframes animate{
    0%
    {
        transform: translateX(0) scale(0.5);
    }
    50%
    {
       transform: translateX(200px) scale(1);  
    }
    100%
    {
        transform: translateX(0) scale(0.5); 
    }    
}

Fração de Animação

Recomendado

Formulário de login futurista

Animação de árvore de Natal em SVG com JavaScript

Projeto Shader WebGL

HTML

CSS

JS

Recomendado

Formulário de login futurista

Animação de árvore de Natal em SVG com JavaScript

Projeto Shader WebGL

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS