CSSミニゲーム・1

CSSテクニックもついに50個目ということで、ちょっとしたお遊び企画。懐かしの電流イライラ棒を模したミニゲーム作ってみました。

さて、何秒でゴールできるかな？

もちろんCSSだけでできてます。javascriptなんて使ってないよ。

ちょっとした解説

今回のソースは秘密ということにしておきます。気になる人は右クリックでソースを見るなり、CSSのアドレスをたどるなりして見てくださいませ。

ベースとなっているテクニックは四角を描くです。これにz-indexと:hoverを組み合わせて、ムニャムニャすると上のようなミニゲームが出来たりするわけです。

javascriptと組み合わせて、ストップウォッチ機能などを搭載すればさらにゲーム性がアップするかも。