本范例通过样式控制图片的出现实现了一个简单有趣的动画，首先把鼠标放在左边的蓝色大门上，逐渐往右边滑动，可以看到一个裸跑者在跑动，哈哈，有趣吧
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<style type="text/css">
#streak {width:485px; height:83px; background:#f00; margin:50px 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(../img/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(../img/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(../img/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(../img/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(../img/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(../img/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(../img/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(../img/streaky.gif) no-repeat; background-position:-440px 0;}
#streak a:hover {cursor:url(cursor.cur), url(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>
在网页<body>区添加以下代码
<div id="streak"> <a href="#" class="pos1"> </a><a href="#" class="pos2"> </a><a href="#" class="pos3"> </a><a href="#" class="pos4"> </a><a href="#" class="pos5"> </a><a href="#" class="pos6"> </a><a href="#" class="pos7"> </a><a href="#" class="pos8"> </a> </div>
