This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.
Hey there!
I built a Earth showing it's transition from being natural to dreadfulness with CSS animations.
This simply highlights the immediate need of protecting the earth before it's gone.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Earth Day - Protect Our Planet</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(to bottom, #e0e0e0 0%, #ececec 30%, #f0f0f0 60%); } .earth { width: 280px; height: 280px; border-radius: 50%; position: relative; /* Make Earth the reference point for message positioning */ background: conic-gradient(#2c9bff 0%, #43a047 60%); /* Healthy Earth colors */ box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.4); animation: earth-state 10s linear infinite alternate; } @keyframes earth-state { from { background: conic-gradient(#2c9bff 0%, #43a047 60%); /* Healthy Earth colors (0%) */ } /* No intermediate keyframes needed as messages control visibility */ to { background: conic-gradient(#333 0%, #555 60%); /* Deteriorated Earth colors (100%) */ } } .message { position: absolute; transform: translateX(-50%); /* Center horizontally */ white-space: nowrap; font-size: 20px; color: #fff; text-shadow: 0 0 5px #000; opacity: 0; /* Initially invisible */ } .message.before { top: calc(50% - 60px); /* Position above Earth with offset */ transform: translateX(-50%); /* Center horizontally */ animation: message-fade-before 10s linear infinite alternate; /* Separate fade animation */ } .message.after { top: calc(50% + 60px); /* Position below Earth with offset */ transform: translateX(-50%); /* Center horizontally */ animation: message-fade-after 10s linear infinite alternate; /* Separate fade animation */ } @keyframes message-fade-before { /* Fade out slightly before the full color transition of Earth (around 70%) */ 0% { opacity: 1; /* Visible when Earth is healthy (before message) */ } 8 0% { opacity: 0; /* Fade out before Earth deteriorates */ } 100% { opacity: 0; /* Remain invisible during deteriorated state */ } } @keyframes message-fade-after { /* Fade in when Earth is fully deteriorated (100%) */ 0% { opacity: 0; /* Remain invisible until fully deteriorated */ } 100% { opacity: 1; /* Visible only at 100% (deteriorated state) */ } } </style> </head> <body> <div class="earth"></div> <div class="message before">Protect Our Planet Before...</div> <div class="message after">It's Gone...</div> </body> </html> This was pretty challenging to implement the idea of Earth transition from a natural state(blue & green) to it's deteriorated and dreadful state(gloomy grey)using pure CSS.
I mustered myself on completing this challenge and finished with what I could.
The takeaway from this was learning about keyframes in CSS and not relying on Javascript to enhance the visual outlook of the prototype.
Thanks for this challenge DEV team!
I hope everybody who participated had learnt something regardless of how you feel about it.
Top comments (0)