マーキーとは、Photoshop とかで、範囲選択したときに表示されるあの点線みたいなヤツです。PARK LA FUN というサイトで、これを見かけて面白いなと思ったので、作り方を紹介します。

　参考サイト：PARK LA FUN - メニューにマウスを重ねてみてください。

さて、↓が自分で作ってみたデモです。文字にマウスを重ねてみてください。

作り方

jQuery とか CSS3 を使ってんだろうなと思った方は、残念ながらはずれです。このアニメーションは、↓のようなアニーションgif で作っています。

CSS

マウスオーバー時に、上の画像を background に設定しています。

a:hover {
	background: url(marching-ant.gif) bottom no-repeat;
}

サムネイルに応用（追記）

これを応用すると、こんな感じのも作れます。↓マウスを重ねてみてください。

※ CSS3 の 複数背景画像を使っているので、
最新のモダンブラウザで見てください。

CSS

CSS3の複数背景画像を使って、アニメーション gif を４枚並べています。

a:hover {
	background: 
		url(marching-ant-bottom.gif) bottom left no-repeat,
		url(marching-ant-top.gif) top left no-repeat,
		url(marching-ant-left.gif) top left no-repeat,
		url(marching-ant-right.gif) top right no-repeat;
}

なんだか、アニメーションgif を見ていると、古き良き昔のインターネットを思い出しました。

この記事で使用した、アニメーションgif は、Fireworksで作っています。Fireworksのソースが必要な方は、こちらからダウンロードできます。自由に使ってください。