WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS सर्कल एनीमेशन HTML स्निपेट
370
ByBy.inc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
15 July 2025
HTML एनिमेटेड लॉगिन फ़ॉर्म उदाहरण
5 October 2024
एनिमेटेड HTML इनपुट
28 March 2025
सीएसएस स्प्राइट-एनीमेशन स्विचर
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) */