Ejemplo de animación de formas CSS

406 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

24 December 2024

Un código de fastclass383

23 November 2024

Animación de rastros de estrellas

5 January 2024

Página de Carga con Círculo Giratorio

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;

} 
    }

Recomendado

Un código de fastclass383

Animación de rastros de estrellas

Página de Carga con Círculo Giratorio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS