Webleb - Snippets de Código - Exemplo de animação de formas CSS

HTML

CSS

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

body {
        background-color: #1C1E23;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
    }
    
    .codigo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #272822;
        color: #F8F8F2;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 18px;
        padding: 20px;
        border-radius: 8px;
        white-space: pre-line;
        text-align: left;
        line-height: 1.6;
        max-height: 50%;
        max-width: 90%;
        width: 100%;
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .brace          { color: #F8F8F2; }
    .comment        { color: #75715E; }
    .function       { color: #A6E22E; }

.animation-container {
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50%;
        overflow: hidden;
        background: transparent;
    }

.container {           
        position: relative;
        width: 200px;
        height: 200px;
    }

.shape {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #FFC000;  
        border-radius: 50%; 
        opacity: 1; 
        animation: shapeAnimation 5s infinite alternate linear;
    }

.shape::before {
            content: '';
            position: absolute;  
            width: 100%; 
            height: 100%;
            background-color: rgba(0, 0, 0, 0); 
            border-radius: 50%;
            transform: translate(-50%, -50%); 
            animation: outlineAnimation 5s infinite alternate linear;

}

@keyframes shapeAnimation {
        0% {
            transform: scale(1)
        }

50% {
            transform: scale(1.1)
            animation-delay: 1s;
        }
        100% {
            transform: scale(0.8)
        }   
    }  
    @keyframes outlineAnimation {
        0%
        {
            transform : rotate(0deg); 
            opacity: 0;

}

50% 
        {
            transform : rotate(-45deg);
            opacity: 1;
        
        }
        100%
        {
            transform : rotate(45deg); 
            opacity: 0;

} 
    }

Exemplo de animação de formas CSS

Recomendado

código de revisão do iphone 16

Página de login

Um código de Mete

HTML

CSS

JS

Recomendado

código de revisão do iphone 16

Página de login

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS