CSSのanimation で作った映画のカウントダウン

CSS3のanimationだけを使ったスライドショーの勉強をしていて、ちょっと思いついたので作ってみました。

古いフィルム映画の冒頭にあるカウントダウンの参考映像を探したのですが、ちょっと見つけられず。仕方なしに記憶と印象だけで作成しましたので、細部は間違っているかもしれません。

以下が実装済みのサンプルで、mozillaとwebkitで動く様にしました。参考に表示したcssソースでは、ベンダープレッフィクスは省略しています。

なお、このサンプルは10秒でループしているので、カウントが完了しても映画は始まりません。

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9

html

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

カテゴリー: css, css3 タグ: , , パーマリンク

シェア

コメントを残す

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

CAPTCHA