ピュアCSSで動くESPカードテストアプリを作ってみた

- by konitter

(最近は見なくなりましたが)テレビなんかで超能力者がよくやるESPカードテストアプリをJavaScriptを使わずCSSオンリーで動くように作ってみました。

仕組みはだいだいこんな感じ。

  • 伏せてあるカードの下で5種類×2枚のカードを適当な順番で同じ場所に重なるようにスタイリング。
  • それらのカードをanimationでz-indexを高速で切り替えてランダムもどきを作る。
  • 5枚横に並んだカードの選択時にanimation-play-stateプロパティをpausedにして上記のanimationを止めて表示。
  • RETRYボタンクリック時に:target擬似クラスの原理を応用してanimationをまた再生するようにする。

こういう選択系のゲームアプリをCSSのみで作る場合、ラジオボタンがよく使われるんですけど、:targetが使いたかったのでa要素にしました。

まあ伏せてあるカードの順番は固定なので、高速で切り替えてるとは言え、目押し的に押せばいつも決まったものを選択できなくもないです。

これらの機能に加えて何問中どれだけ正解したかみたいなスコアを出したかったんですが、やり方が思いつかず断念しました。(いい方法をご存知の方は教えてください。)

正直CSSでやる意味はあんまないです。カヤックさんのHTML5杯みたいにJS使って制御できた方がよっぽどモテます。

良い子は真似しないように。※ただしHENTAIを除く