Purely CSS Baymax
comment 0

Animated Baymax Face in CSS

Baymax is an adorable and cuddly robot that everyone loves from the Disney animated film Big Hero 6. In this tutorial, Donovan Hutchinson shows us how to make an animated Baymax face in CSS. Since Baymax’s face consists of basic shapes, the tutorial is quite simple to follow too. Donovan only uses one HTML element to build the face area and he takes advantage of pseudo elements to render the rest of the facial features. To give some of impression of Baymax’s head on the website, he applies the basic Baymax body color and also radial gradient background color into body to make it appear 3D-ish. The little animation idea comes from the scene where Baymax’s battery was running low and his eyelids dropped a little bit. Hit the button below to learn how to code Baymax’s face.

View More View Demo

Filed under: CSS, TGIF

About the Author

Posted by

Sani Halid is a front-end developer at Stampede and is committed to clean and elegant code. Yet another gamer to join the pack, Sani is also the Editor at Constructs where he shares his daily CSS findings and other front-end development goods.

Leave a Reply