Esempio di contenitore di animazione CSS

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

25 June 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; } 
}

Esempio di contenitore di animazione CSS

Consigliato

Un codice di Mete

Film di carte CSS pure 3D

Un codice di lebdev

HTML

CSS

JS

Consigliato

Un codice di Mete

Film di carte CSS pure 3D

Un codice di lebdev

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS