borderのgifアニメ

たまに見かける画像の周りをgifがぐるぐる回るやつ、どうやるのかなと思ってやってみた。

 

gifを背景に敷いて、差分を加えたwidthとその分のpaddingで余白を持たせてあげる

<div>
	<a href="#"><img src="image.gif" width="200" height="160"></a>
</div>

div {
	width: 202px;
	height: 162px;
}
div:hover {
width: 202px;
height: 162px;
background: url(border.gif) repeat left top;
}
img {
padding: 1px;
}

なので正確にはborderじゃないですね
デモ

 

参考

• mekke