WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Exemplo de contêiner de animação CSS
364
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
17 May 2025
Formulário de login moderno + barra lateral deslizante
4 October 2025
Teclado virtual HTML com monitor de entrada
20 September 2025
Modelo HTML de Portfólio do Desenvolvedor
HTML
Copy
CSS
Copy
* { 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; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */