My daughter is learning about the solar system and other bits of astronomy in school, so I thought it would be fun to create a little CSS animation that shows how the orbits work. I found this image on Dribbble that I really liked the look of, and decided to recreate it in CSS. This served well enough to explain to her how much smaller than the sun we are, and the Earth’s place in the solar system. Right now of course, these orbits and sizes are not at all to scale, but maybe someday!
Tag: astronomy
CSS Eclipse, AKA ECSS-lipse
Posted onI saw this animation on Dribbble and I fell in love with it, so of course I had to remake it in CSS. I still need to do the spark animation when the eclipse is total (well, it’s not total, it’s an annular solar eclipse actually). When I was doing it, I couldn’t figure out an elegant way to have the spark come around and paint the border the way it does in the animation, at least not with CSS. I’m still working on my animation chops here, okay? If I had realized how vital animation would be to my future career, I would have taken more animation classes when I did sound. Yeah, that degree’s totally working out for me these days…
Enjoy!
See the Pen Annular solar eclipse in CSS by Smokie Lee (@xtoq) on CodePen.