閉じる
カテゴリー

CSSアニメーションミニゲーム
ネコブレイバーをつかまえろ!

Start!!
Retry
※ネコブレイバーはマッハドッターbraveさんの作品です。

CSSアニメーション例

アニメーション概要

カウントダウンはそれぞれ重なったdivタグのボックスに対して、opacityをずらして表示しています。

通過するネコブレイバーはleftプロパティで動かしています。

つかまえるのに失敗した場合、ネコブレイバーの通過後にRetryボタンが表示しますが、これもCSSのopacityで制御しています。そのため、透過しているときでもクリックできる欠点があります。この欠点を補うなら、JavaScriptでdisplayプロパティを切り替えるのがよいと思います。

つかまえるのに成功したらモーダルが表示されますが、これもCSSアニメーションでは苦しかったので、JavaScript(jQuery)で実装しています。クリックイベントでモーダルをfadeIn、ネコブレイバーをfadeOutしています。

HTML/CSS一覧