WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
code bloom
566
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
27 June 2025
Un code de Mete
22 April 2025
Un code par hanyhelmy119
22 March 2025
Un code par carab5256
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; 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: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background-color: #000; } .code-block { position: relative; width: 80px; height: 80px; margin: 10px; background-color: #000; border: 2px solid #F08080; border-radius: 8px; animation: codeBloom 1.5s infinite alternate ease-out; } .code-block::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(ellipse at center, rgba(0, 149, 255, 0) 0%, rgba(0, 149, 255, 0.8) 100%); opacity: 0; animation: bloomOpacity 1.5s infinite alternate ease-in-out; } @keyframes codeBloom { 0%, 100% { transform: scale(1); clip-path: inset(10%); } 50% { transform: scale(1.15); clip-path: ellipse(100% 120% at 50% 50%); } } @keyframes bloomOpacity { 0% { opacity: 0; } 100% { opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */