Mozilla Demo Studio

  • デモを投稿

Make Room for the Little Ones! - Media Queries

Watch the big whale make room for the smaller whales as the screen size is reduced. 100% CSS3.

利用技術: モバイル, HTML5, CSS3

  • 閲覧数 64
  • コメント数 0

このデモについての作者の詳細コメント

This demo uses only CSS3 for all the effects that you see. There is no JavaScript AT ALL!

How to test this demo?
You can change the size of your browser (Firefox, Safari, Chrome recommended) from the least value to full screen and see how the demo works. You can see the big whale leaving the screen when the screen size is small. Watch it stay afloat when there is not much room for it to swim and swim freely when there is ample room.

Also note how the tail and its eyes are animated.

You can also use the amazing Responsive Design View tool in Firefox (Firefox > Web Developer > Responsive Design View) and save the hard work of resizing your browser and enjoy the animation.

まだコメントはありません。

コメントを投稿するには、サインアップ するか ログインしてください。

ソースコードを入手

ソースをダウンロード 2.89 KB · ZIP ファイル

このデモは BSD ライセンスの下で公開されています。

SiddharthRao による他のデモ