几个利用背景结合a:hover做的小东东，希望对大家有所帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动画</title> <script type="text/javascript" src="scripts/moveElement.js"></script> <style> img { border-width:0; } #fg a { display:block; height:37px; width:37px; background:url(/article/UploadPic/20079/26/2007926183849993.gif); background-position:0 0; background-repeat:no-repeat; } #fg a:hover { background-position:-35px 0; } #bd a { display:block; height:37px; width:37px; background:url(/article/UploadPic/20079/26/2007926183849945.gif); background-position:0 0; background-repeat:no-repeat; } #bd a:hover { background-position:-35px 0; } #head a { border:1px solid #0099FF; display:block; height:50px; width:50px; } #head a:hover { background:url(/article/UploadPic/20079/26/2007926183849830.gif); } </style> </head> <body> <span id="fg"><a href="#"></a>我是会发光的星星</span> <span id="bd"><a href="#"></a>我是会变大发光的星星</span> <span id="head"><a href="#"></a><br />我是一个骷髅头</span> </body> </html> [提示：你可先修改部分代码，再按运行]
用到的图片素材：
请稍等，评论加载中...