Fun with Old School Mario and css3 transitions

Old School nes Super Mario atop the pipes!

I’ve been working on some css3 transitions and animations lately, partially because I’m a total frontend freak and partially because html5/JavaScript is going to be used to build full-feature games in the not-so-distant future. I have a raging desire to recreate The Legend of Zelda from the nes and/or Contra and know that css3 can and will be used heavily in such endeavors.

As I was going through some basic examples, I realized that I could start toying around with these notions in my examples, rather than just using basic, default css styles and I came up with this basic example, that is only super awesome because it’s Mario going down the pipe. Simply position your cursor over the Italian Stallion and down he goes! It doesn’t work in ie because it’s entirely css3 based; weak sauce, I know, but lame-browser compatibility was not on my agenda today.

You can view the demo on jsfiddle if you want to play with it.

Also read...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>