Exemplo de contêiner de animação CSS

Abrir no Editor Video Publique Seu Código

Recomendado

21 July 2025

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #181818; 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%; width: 100%; 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; } 
.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; }
.animacao1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url('https://picsum.photos/100/100?random=1'); /* Use YOUR image */
    background-size: cover;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); 
    animation: glitch 3s linear infinite;
    background-color: rgba(255, 255, 255, 0.1);
}
.animacao1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1); 
    filter: blur(5px);
    animation: blurFade 10s ease-in-out infinite; 
}

.animacao2 {
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: #66D9EF;
    transform: rotate(45deg);
    clip-path: circle(50% at 50% 40%);
    animation: pulse 2.5s ease-in-out infinite alternate;
}

@keyframes glitch { 
    0% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }
    25% { clip-path: polygon( 50% 10px, 100% 100%, 50% 100%, 0% 100%); } 
    50% { clip-path: polygon( 50% 0%, 100% 40%, 50% 100%, 0 40%); } 
    75% { clip-path: polygon( 50% 10px, 100% 100%, 50% 100%, 0% 10%); } 
    100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }

}
@keyframes blurFade { 
   0% { opacity: 1; }
   70% { opacity: 0.5; filter: blur(20px); } 
   100% { opacity: 1; } 
}
@keyframes pulse { 
    0% { transform: scale(1); box-shadow: 0 0 10px #48BEFF; }
    50% { transform: scale(1.1); box-shadow: 0 0 20px #48BEFF; }
    100% { transform: scale(1); box-shadow: 0 0 10px #48BEFF; } 
}

Exemplo de contêiner de animação CSS

Recomendado

Nexus de dados Cyberpunk

Formulário de login futurista

Um Código de Metehan

HTML

CSS

JS

Recomendado

Nexus de dados Cyberpunk

Formulário de login futurista

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS