Flashでよくやっていた表現で、jQueryで置き換えられるものはないかと考えていて、ふとコレを思いついたので紹介します。応用次第ですので、アイディアのネタとして見てください。 今回も、言葉で表現しにくいので、↓のデモをモダンブラウザで見てください。 マウスオーバでアニメーションします。 作り方 このアニメーションは、同じサイズのPNGファイルを2つ重ね、後ろの画像をアニメーションさせることで、実現しています。 前面画像の白い部分は、透明になっていて、背景画像が透き通ってみえるようになっています。その状態で、背景画像をアニメーションさせることで、塗りがアニメーションしているように見えるというからくりです。 HTML+CSS いたってシンプルです。前面画像をコンテナDIVで囲み、コンテナDIVに背景画像を設定しています。 <!DOCTYPE html> <html lang="ja"> <
![jQueryで塗りがアニメーションするようなギミックを作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/30f6c8984f2feeb2b57d7b1bb55b7811a59fb275/height=288;version=1;width=512/http%3A%2F%2Fwebrocketsmagazine.com%2Fimg%2Fupload%2F2947.png)