CSSな生物

CSSのアニメーションで、クリーチャを作ってみました。

当初は何とも線虫っぽくて気持ち悪かったので、目玉などをつけて愛嬌を出しております。

例によってmozillaとwebkitで動くようにしていますが、PCのパワーが足りないと、スムーズにアニメーションしないかもしれません。

しばらく見ていると、2体目が出てきますが、体節を動かす@keyframesや、出現移動をさせる@keyframesは共通のものを使っているのが工夫ポイントです。体節の長さを変えたり、animation-durationを変えて、大きさの違いを強調してみました。

また、多関節風にする為に、要素を入れ子のabsoluteにして、直接の親を基準にpositionしています。その上で、animation-delayを節ごとに遅らせると、体節がウネウネする、という仕組みです。

以下に、ソースをのせておきます。

html

[crayon]
[/crayon]

css(ベンダープレフィックスは省略しています)

[crayon] [/crayon]
カテゴリー: css, css3 タグ: , , パーマリンク

シェア

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください