CSSでつくるアニメーション付ソーシャルブックマークメニュー[CSS]

Revisitedより、CSSでつくるアニメーション付ソーシャルブックマークメニューの紹介です。

png0902191.jpg

HTMLは<li>でコーディングされています。
マウスホバー時にアニメーションします。以下がソースの一部です。

ホバー時にネガティブ値が指定されています。

CSS

.delicious {
	background-position:left top;
}
.delicious:hover {
	background-position:left bottom;
}
.yahoo {
	background-position:-650px top;
}
.yahoo:hover {
	background-position:-650px bottom;
}

カスタマイズも簡単なので、オリジナルのソーシャルブックマークメニューが作れます。