WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Ghost Animation
577
byby.createsite
Open In Editor
Publish Your Code
Recommended
19 July 2023
CSS Cards Carousel
28 August 2025
CSS Tabs Example: Simple HTML Layout
3 March 2023
Fluid Text Animation
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #253446; 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%); width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .ghost { position: absolute; width: 100px; height: 100px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; animation: fade-in-out 5s linear infinite; } @keyframes fade-in-out { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */