Bender bailando hecho solo con CSS3

BenderCSS

 

Hoy les traigo otro ejemplo de las capacidades increíbles que tiene la nueva versión de CSS, en su versión número 3 puso a disposición la capacidad de crear animaciones, formas, figuras, sombras, degradados y otras maravillas que antes tan solo eran posible con imágenes o con Flash.

El ejemplo de hoy es el más divertido que he publicado hasta la fecha, se trata de uno de los protagonistas de la serie geek y nerd Futurama, que aunque algunos digan que Los Simpsons es más geek pero eso es otra historia.

En este ejemplo Bender está compuesto por muchas etiquetas div y span, cada articulación, cada ojo, cada brazo, cada mano corresponde a una y gracias a las capacidades de CSS3 se empieza a crear el esqueleto, los tamaños y luego la animación completa, los más impresionante del ejemplo es que hasta los ojos, cejas, dientes y su antena receptora se animan con armoniosa sincronización.

El ejemplo completo lo pueden ver en Liveweave y comprobar que no se trata de ningún hack o uso de JavaScript, tan solo CSS puro y mucha creatividad y por supuesto afición a la serie animada.