Pure CSS3 dancing Bender • Hacker News Board

Re: Pure CSS3 dancing Bender

#21

Post by lcnmrn » Wed, Oct 23, 2013, 3:34 AM UTC

sown wrote: post #14

neat! I've gotten into CSS3 and JS recently but I'm not sure how this works. Can someone explain to this old C dog the principles of how it works, though? I thought this would require JS to work? I apologize in advance for being out of touch. :(

You set up your elements in HTML, then do the keyframes and reposition the elements in CSS.

I did this: http://lucianmarin.com/peculiar/

Re: Pure CSS3 dancing Bender

#22

Post by shmerl » Wed, Oct 23, 2013, 3:38 AM UTC

null_ptr wrote: post #11

The legs slide horizontally off Bender's ass on Firefox 24 on Linux :-( Nevertheless, great work!

I thought it's by design :)

Reminded me the undead break dance from the inXile's Bard's Tale: https://www.youtube.com/watch?v=sP_7nFldRtY

Re: Pure CSS3 dancing Bender

#23

Post by arbutus » Wed, Oct 23, 2013, 3:41 AM UTC

This is really neat. I'm really interested in seeing how all these new fancy CSS3/HTML5 features shape the evolution of casual online games. Back in the day it was either static images, like the Neopets sort of thing (which are still pretty common with young kids I think - Webkinz is a cash cow and that site looks straight out of my childhood), or slow awful Flash games that usually didn't have any data persistence. Even if this Bender example is kind of hacky as other comments are indicating, the possibilities still seem pretty limitless.

Re: Pure CSS3 dancing Bender

#24

Post by xer0x » Wed, Oct 23, 2013, 3:42 AM UTC

boom!

Re: Pure CSS3 dancing Bender

#25

Post by sillysaurus2 » Wed, Oct 23, 2013, 3:44 AM UTC

arbutus wrote: post #23

This is really neat. I'm really interested in seeing how all these new fancy CSS3/HTML5 features shape the evolution of casual online games. Back in the day it was either static images, like the Neopets sort of thing (which are still pretty common with young kids I think - Webkinz is a cash cow and that site looks straight out of my childhood), or slow awful Flash games that usually didn't have any data persistence.…

For an example of one modern JS game, see http://www.bombermine.com

I'm not aware of any games that use CSS3 for the ingame graphics, though.

Re: Pure CSS3 dancing Bender

#26

Post by blt » Wed, Oct 23, 2013, 3:51 AM UTC

It seems like we should be seeing heavy duty graphical editors that output CSS3 animations. Any tools exist yet?

Re: Pure CSS3 dancing Bender

#27

Post by DavidPlumpton » Wed, Oct 23, 2013, 4:02 AM UTC

null_ptr wrote: post #11

The legs slide horizontally off Bender's ass on Firefox 24 on Linux :-( Nevertheless, great work!

That's because Bender's metal ass is so shiny.

Re: Pure CSS3 dancing Bender

#28

Post by aegiso » Wed, Oct 23, 2013, 4:04 AM UTC

lubujackson wrote: post #18

How does.. I don't even... Is there some tool they used to make this? Because my human brain can't imagine how this came to exist.

Looks like pretty clean handmade CSS.

I don't see any magic here. Modern CSS3 lets you build arbitrary geometry with arbitrary animations if you're crazy enough.

What I do see here is an excellent grasp of Cartesian geometry and some serious dedication. Which I suppose is no less magical.

Re: Pure CSS3 dancing Bender

#29

Post by ntumlin » Wed, Oct 23, 2013, 4:09 AM UTC

lele0108 wrote: post #19

Pure CSS horse: http://codepen.io/anon/pen/tvaio

I think that's cheating.

Re: Pure CSS3 dancing Bender

#30

Post by deadsnake » Wed, Oct 23, 2013, 4:12 AM UTC

Guess CSS is basically a Turing complete language.