WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ejemplo de contenedor de animación CSS
699
byby.createsite
Abrir en el editor
Publica tu código
Recomendado
30 April 2025
Un código de Mete
21 April 2025
Un código de Metehan
14 June 2024
icono de redes sociales con el cursor
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1a1a1a; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #222; color: #eee; 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; } .el1 { position: absolute; width: 200px; height: 200px; background: #F8F8F2; border-radius: 50%; transform-origin: center; animation: pulse 2s infinite alternate; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .el2 { position: absolute; width: 150px; height: 150px; background: #272822; clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 50% 50%); transform-origin: center; animation: rotate-and-expand 4s infinite; animation-delay: 1s; } @keyframes rotate-and-expand { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(45deg) scale(1.2); } 50% { transform: rotate(90deg) scale(0.9); } 75% { transform: rotate(135deg) scale(1.1); } 100% { transform: rotate(180deg) scale(1); } } .el3 { position: absolute; width: 320px; height: 100px; background: linear-gradient(to right, #66D9EF, #16BDF8); border-radius: 10px; opacity: 0; animation: fade-in-out 3s infinite; animation-delay: 2s; } @keyframes fade-in-out { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */