Today was a lot tweaking! First I thought, “holes with css, I know how to do that!” I created a bunch of circular divs and worked on getting an image to appear and disappear randomly. I couldn’t find a mole so I used a hippo!
So cute, right? Once I got the hippo to appear and disappear randomly, I had to make the animation for the hippo to pop out of the hole. This is when I realized I would have to split the holes into two. More divs!
There were 4 parts: the top oval, the bottom oval, the hippo, and the container. They’re so cute, they look like lions! I thought it was funny to have their ears sticking out but later decided to push them down lower. To hide the hippos’ bodies, I created a hider div in each container.
I put a border around the hider div just so it would be easier to tweak the dimensions. And finally, switching the hippos to moles! Since the mole images were a different shape, I tweaked the dimensions of the container and the hider.
Day 29 – Whack a Mole