WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Fragmento HTML de animación de círculo CSS
729
byby.createsite
Abrir en el editor
Publica tu código
Recomendado
5 August 2024
Lámpara de calle interactiva
10 December 2024
Un código de agilecloud61
2 June 2025
Un código de youssefdahroug2005
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #181B27; 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; } .container { position: relative; width: 100%; height: 100%; } .circle { position: absolute; width: 100px; height: 100px; border-radius: 50%; background-color: #FFD700; /* Cor amarelo ouro */ animation: fadeInOut 3s infinite alternate; } .circle:nth-child(1) { left: 50px; top: 50px; animation-delay: 0s; } .circle:nth-child(2) { left: 150px; top: 150px; animation-delay: 0.5s; } .circle:nth-child(3) { left: 250px; top: 50px; animation-delay: 1s; } .circle:nth-child(4) { left: 50px; top: 250px; animation-delay: 1.5s; } @keyframes fadeInOut { 0% { opacity: 1; } 50% { opacity: 0.1; } 100% { opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */