XHTML+CSS应用教程——用CSS实现的小动画

这个幽默的小动画展现了丰富的想象力和CSS的潜力

1XHTML+CSS应用教程——CSS实现文字的双影 2利用CSS实现双语导航条 3CSS实现小提示框 4利用CSS变换背景图片 5CSS实现放大镜效果 6利用CSS实现按钮效果(无图片) 7利用CSS实现页面左侧动态导航 8利用CSS实现的动态相册 9利用CSS实现的字符放大 10CSS仿造淘宝导航条 11利用CSS实现动态按钮 12利用CSS实现鼠标悬停提示 13用CSS实现的小动画 14利用CSS打造的缩略图像册
实际效果：(用鼠标从左向右滑过图片)
代码及简要分析: 
<style type="text/css">
#streak {width:485px; height:83px; background:#f00; margin:3em auto;}
#streak a.pos1, #streak a.pos1:visited {display:block; width:50px; height:83px; float:left;text-decoration:none;}
#streak a.pos1 {background:#fff url(../3/streaky.gif) no-repeat; background-position:0 0;}
#streak a.pos2, #streak a.pos2:visited {display:block; width:50px; height:83px; float:left;text-decoration:none;}
#streak a.pos2 {background:#fff url(../3/streaky.gif) no-repeat; background-position:-50px 0;}
#streak a.pos3, #streak a.pos3:visited {display:block; width:70px; height:83px; float:left;text-decoration:none;}
#streak a.pos3 {background:#fff url(../3/streaky.gif) no-repeat; background-position:-100px 0;}
#streak a.pos4, #streak a.pos4:visited {display:block; width:70px; height:83px; float:left;text-decoration:none;}
#streak a.pos4 {background:#fff url(../3/streaky.gif) no-repeat; background-position:-170px 0;}
#streak a.pos5, #streak a.pos5:visited {display:block; width:60px; height:83px; float:left;text-decoration:none;}
#streak a.pos5 {background:#fff url(../3/streaky.gif) no-repeat; background-position:-240px 0;}
#streak a.pos6, #streak a.pos6:visited {display:block; width:80px; height:83px; float:left;text-decoration:none;}
#streak a.pos6 {background:#fff url(../3/streaky.gif) no-repeat; background-position:-300px 0;}
#streak a.pos7, #streak a.pos7:visited {display:block; width:60px; height:83px; float:left;text-decoration:none;}
#streak a.pos7 {background:#fff url(../3/streaky.gif) no-repeat; background-position:-380px 0;}
#streak a.pos8, #streak a.pos8:visited {display:block; width:45px; height:83px; float:left;text-decoration:none;}
#streak a.pos8 {background:#fff url(../3/streaky.gif) no-repeat; background-position:-440px 0;}
#streak a:hover {cursor:url(../3/cursor.cur) , url(../3/cursor.csr) , crosshair;}
#streak a.pos1:hover {background-position:0 -83px;}
#streak a.pos2:hover {background-position:-50px -83px;}
#streak a.pos3:hover {background-position:-100px -83px;}
#streak a.pos4:hover {background-position:-170px -83px;}
#streak a.pos5:hover {background-position:-240px -83px;}
#streak a.pos6:hover {background-position:-300px -83px;}
#streak a.pos7:hover {background-position:-380px -83px;}
#streak a.pos8:hover {background-position:-440px -83px;}
</style>
<div id="streak">
<a href="#" class="pos1">&nbsp;</a><a href="#" class="pos2">&nbsp;</a>
<a href="#" class="pos3">&nbsp;</a><a href="#" class="pos4">&nbsp;</a>
<a href="#" class="pos5">&nbsp;</a><a href="#" class="pos6">&nbsp;</a>
<a href="#" class="pos7">&nbsp;</a><a href="#" class="pos8">&nbsp;</a>
</div>