Daily CSS Challenge – 10 – Pencil Jar (animated)

Creating images with code. This is my 10th entry for the Daily CSS Images Challenge. Topic for the day is “Pencil Jar”. I wanted to make it more entertaning, so I made the pencils dance a bit. 🙂

To estimate the movement of the objects, I used this formula:
Total px of element width (120px) / percentage duration (40%) = px per percent (3px)

March 28, 2017 – Pen featured in CodePen.io homepage 🙂

March 31, 2017 – Pen featured in Weekly Showcase!

See the Pen Daily CSS Images 10: Pencil Jar (animated) #dailycssimages by Elmer Balbin (@elmzarnsi) on CodePen.27172

HTML

CSS
Because the CSS is too long, it’s better for you to copy it from the CodePen Editor instead. Thanks!

Elmer Balbin

Web developer from Bacolod, Steam Sale hunter, and casual DotA 2 player.

about me

Leave a comment

avatar

Get great deals on hotel rooms from all over the world BOOK NOW