WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ejemplo de animación de fragmento CSS
369
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
29 July 2024
Clasificación de emojis
23 August 2025
Portafolio de desarrolladores web: HTML, CSS, JavaScript
9 November 2023
Menú de Pestañas en JavaScrip
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; } .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; } .fragment{ position: relative; width: 100px; height: 100px; background: #9D26BF; /* Cor do emoji */ animation: fragmentDrip 4s ease-in-out infinite; } @keyframes fragmentDrip { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; filter: blur(0px); } 50% { transform: translate(20px, -10px) rotate(180deg); opacity: 0.5; filter: blur(10px); } 100% { transform: translate(-10px, 20px) rotate(360deg); opacity: 0; filter: blur(20px); } } /* Animação - as animações devem refletir o efeito da busca incessante por validação e como pode levar à aceleração digital */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */