マーキーとは、Photoshop とかで、範囲選択したときに表示されるあの点線みたいなヤツです。PARK LA FUN というサイトで、これを見かけて面白いなと思ったので、作り方を紹介します。
参考サイト:PARK LA FUN - メニューにマウスを重ねてみてください。
さて、↓が自分で作ってみたデモです。文字にマウスを重ねてみてください。
作り方
jQuery とか CSS3 を使ってんだろうなと思った方は、残念ながらはずれです。このアニメーションは、↓のようなアニーションgif で作っています。
CSS
マウスオーバー時に、上の画像を background に設定しています。
1
a:hover {
2
background
:
url
(marching-ant.gif)
bottom
no-repeat
;
3
}
サムネイルに応用(追記)
これを応用すると、こんな感じのも作れます。↓マウスを重ねてみてください。
※ CSS3 の 複数背景画像を使っているので、
最新のモダンブラウザで見てください。
CSS
CSS3の複数背景画像を使って、アニメーション gif を4枚並べています。
1
a:hover {
2
background
:
3
url
(marching-ant-
bottom
.gif)
bottom
left
no-repeat
,
4
url
(marching-ant-
top
.gif)
top
left
no-repeat
,
5
url
(marching-ant-
left
.gif)
top
left
no-repeat
,
6
url
(marching-ant-
right
.gif)
top
right
no-repeat
;
7
}
なんだか、アニメーションgif を見ていると、古き良き昔のインターネットを思い出しました。
この記事で使用した、アニメーションgif は、Fireworksで作っています。Fireworksのソースが必要な方は、こちらからダウンロードできます。自由に使ってください。
コメント