CSSで作ったahaムービー 空き地に放置された…

HTML/CSSコーディング

一昔前にahaムービーって流行りましたよね。時間かけてちょっとずつ変化する画像、どこが変わってるかわかりますか?ってやつ。

たしか脳科学者の茂木健一郎さんがテレビ出だした頃からですよね。あれっぽいやつCSSで作ってみたのでどうぞ。

出題編

以下の画像のどこかが30秒かけて徐々に変化します。さてどこが変わってるでしょうか…あ、すみませんIE9以下では多分見れないと思いますのでモダンブラウザでどうぞ。

ちなみに30秒で変化しきってそのあと30秒で逆再生…を無限ループしてますのでじっくり何度も見てればわかるかも。

答えは以下の通り。黒枠にマウスのっけると解答が表示されます。

解答編

ちょっと簡単すぎましたかね?

ちなみにこれはCSSのキーフレームアニメーション使って作ってます。

次はもうちょっと凝った問題作ってみようかな。

んじゃまた。

コメント

タイトルとURLをコピーしました