CSSでリンク下の点線をマーキーツールのようにアニメーションさせる

CSSでリンク下の点線をマーキーツールのようにアニメーションさせる

マーキーとは、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 を4枚並べています。

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のソースが必要な方は、こちらからダウンロードできます。自由に使ってください。

 

namba

田舎でプログラマーとかWebデザイナーとかやりながらWebサービスを作る人。PHP、jQueryなどの技術系の記事担当してます。 がんばって記事を書くので、リアクションしてくれると嬉しいです。

コメント