This fun little animation was built from Beard Chicken’s Dribbble shot. (The animation will only run a couple of times here, but on CodePen it’s infinite… hypnotizing even.)
I used only two elements for this project by putting
box-shadow to work.
The main element
.rabbit is the rabbit’s body. The
:before is the tail, but then I used
box-shadow to resize, recolor, and relocate the element’s shadow into making the rabbit’s eye. I added another
box-shadow and made the rabbit’s hind leg. Then I added multiple shadows to create the front leg.
Similarly, the rabbit’s
:after is one ear. By using
box-shadow, I was able to create the second ear.
I created one cloud using pseudo elements, but then used
box-shadow to display two more clouds.
The fourth value of
box-shadow controls the size of the shadow, or
spread-radius. Until today, I had severely under used this value.
spread-radius is optional, but the value is 0 unless specified. If the
spread-radius is greater than 0, then the shadow will grow. If the
spread-radius is less than 0, then the shadow will shrink. When shrinking the shadow, you have to use small units (especially in ems), otherwise the shadow will disappear.
So in the case of
box-shadow creates a copy of the element, but is moved to the right 5em and down 2em. I slightly shrunk the new cloud, using -0.3em for the
spread-radius. Naturally, I set the color of the cloud to white. For the second
box-shadow, I moved it to the left 2em and down 2em, but kept it the same size. I set the
blur-radius to 0 for both shadows so that there is no blur and I receive a crisp cloud.
@keyframes just right took a bit of adjusting, but I loved how this rabbit came to life!