WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Animation Code Block Example
374
ByBy.inc
Open In Editor
Publish Your Code
Recommended
26 September 2025
CSS Loading Animation with Background Image
20 August 2024
Pure CSS Bike Card
16 January 2025
Movie Website Landing Page Example
HTML
Copy
Bugfix me:
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #333; 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; } .codigo { /* Este código é uma representação simbólica da complexidade cresce em função de um bug desconhecido. */ } .code-block { animation: th_bug_weight 3s ease infinite; background: linear-gradient(to bottom, #000, #141414); color: rgba(255, 255, 255, 0.7); padding: 5px 10px; border-radius: 8px; } /* Animações */ @keyframes th_bug_weight { 0% { transform: scale(1); } 50% { transform: scale(1.1); opacity: 0.9; } 100% { transform: scale(1); opacity: 0.7; } } /* Efeitos visuais */ .effect { animation: th_fragmented-code 2s ease infinite; } @keyframes th_fragmented-code { 0% { filter: brightness(100%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } 50% { filter: brightness(120%); clip-path: polygon(40% 0%, 80% 25%, 80% 75%, 40% 100%, 0% 75%, 0% 25%); } 100% { filter: brightness(100%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */