css实现鼠标经过导航菜单文字偏位效果

作者:sky 点击:99 评论:0 发布时间:周六, 06/27/2009 - 22:51 所属分类:文字特效

鼠标经过导航菜单时，文字稍微偏位移动，自定义偏位距离。

<!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" /> <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>网页特效 css实现鼠标经过导航弹动效果站长特效网欢迎您。</title> <style type="text/css"> #www_zzjs_net{ list-style:none; margin:0; padding:5px 0 0 0; background:#F0F0F0; } #www_zzjs_net li{ float:left; display:inline; margin-right:2px; } #www_zzjs_net a{ float:left; width:81px; height:28px; text-align:center; background:url(/img/1_130617_zzjs.gif) no-repeat 0 -4px #F3602A; font:12px/24px '宋体'; color:#FFF; text-decoration:none; } #www_zzjs_net a:hover{ line-height:28px; background-position:0; } </style> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <ul id="www_zzjs_net"> <li><a href="http://www.zzjs.net">站长特效一号</a></li> <li><a href="http://www.zzjs.net">站长特效二号</a></li> <li><a href="http://www.zzjs.net">站长特效三号</a></li> <li><a href="http://www.zzjs.net">站长特效四号</a></li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: