Animations, transformations, content and fun through mediaqueries

Hergestellt unter Verwendung von HTML5, CSS3, Schriftarten & Typ, Mobile

  • 260 Mal angesehen
  • 3 Kommentare

Mehr über diese Demo vom Autor

The demo shows how to create a funny animated scene of pacman and how to show content in different ways using mediaqueries and CSS only (so javascript was not intentionally used).

On browser resize, pacman begins to eat balls and to increase his score moving to the left, while a ghost (inky) is trying to chase him. At some breakpoints, an object may pulse: a click on these pulsing objects reveals some insights on a layer about the game. The same content is thus placed on the bottom of the page when the browser width reaches the last breakpoint.

Some content explaining the purpose of the demo is also available when CSS support is not enabled.

Technologies used
- CSS3
- Font embedding

It looks good on Firefox and Opera. On webkit (it doesn't support animations on pseudoelements) and IE9 some effects fail.

Bisher 3 Kommentare

Melden Sie sich an, um Ihren eigenen hinzuzufügen.

  1. depy schrieb,

    Nice one, I liked it :D Made me remember the childhood days..
  2. monigarr schrieb,

    This is so cute! Thanks for sharing :)
  3. fcalderan schrieb,

    @depy, @monigarr - Thank you :)

Über diese Demo

Laden Sie den Quelltext herunter 200.19 KB · ZIP-Datei

Browse the Source

Diese Demo steht unter der Lizenz GPL.