ksk広告CSSのアニメーションで、クリーチャを作ってみました。当初は何とも線虫っぽくて気持ち悪かったので、目玉などをつけて愛嬌を出しております。例によってmozillaとwebkitで動くようにしていますが、PCのパワーが足りないと、スムーズにアニメーションしないかもしれません。見ていると、2体目が出てきますが、体節を動かす@keyframesや、出現移動をさせる@keyframesは共通のものを使っているのが工夫ポイントです。体節の長さを変えたり、animation-durationを変えて、大きさの違いを強調してみました。多関節風にする為に、要素を入れ子のabsoluteにして、直接の親を基準にpositionしています。その上で、animation-delayを節ごとに遅らせると、体節がウネウネする、という仕組みです。以下に、ソースをのせておきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。designerのKSKです。このサイトのコンテンツはhtml5やCSS3の情報や実装で構成しているので、これらをサポートしているブラウザ(FirefoxやChrome)で閲覧することを推奨します。WordPress.。