←このアニメgifを画像とテキストを入れるboxの背景に敷き詰めます。アニメgifは全体に斜線が移動しますが、サンプル1の場合は画像がマスクになって、破線が動いているように見えます。同様にサンプル2のテキストの場合も途中に挟んだdivの背景に色を付けてマスクしています。 サンプル3は、サンプル2と同じものですが、背景のアニメgifのみを変更して、破線の移動する方向を右下にしています。サンプル1（画像）
サンプル1・CSSソース
a.box {
display: block; width: 202px; height: 202px; margin: 0 auto; text-align: center;
border: 1px solid #eee;
}
a.box img {
padding: 1px;border: 0;
}
a.box:hover {
opacity:0.7; filter:alpha(opacity=70); -ms-filter: “alpha( opacity=70 )”;
padding: 1px;border: 0;
background: #fff url(images/anime-dot.gif) repeat left top;
}
サンプル2
サンプル3
サンプル2・CSSソース
a.box2 {
display: block;width: 202px; height: 52px;margin: 0 auto;
text-align: center;border: 1px solid #777;text-decoration: none;
}
a.box2 div {
width: 200px; height: 50px; margin: 1px auto; background: #efefef;
}
a.box2 div span {
display: block;padding: 15px 0 0 0; font-weight:bold;
font-size:15px; color:#000;
}
a.box2:hover {
opacity: 0.7; filter: alpha(opacity=70); -ms-filter: “alpha( opacity=70 )”;
padding: 1px; border: 0;
background: #fff url(images/anime-dot.gif) repeat left top;
}
