Exemple d'animation de formes CSS

751 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

23 September 2025

Extrait HTML d'animation de chargement CSS

29 December 2025

Convient pour la pratique du HTML/CSS/JS

11 May 2024

Activer/Désactiver

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;

} 
    }

Recommandé

Extrait HTML d'animation de chargement CSS

Convient pour la pratique du HTML/CSS/JS

Activer/Désactiver

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS