CSS黑白变成彩色图片的块状导航_菜单导航特效

CSS控制一幅黑白图片变成彩色，并以此为基础制作一个新奇的图片块状导航殊效，每一个方块最开始是黑白色的，CSS的应用使鼠标放上后调用彩色的图片，形成一个由黑白变彩色的块状导航效果。

<!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" mrc="text/html; charset=gb2312" />
<title>CSS黑白变成彩色图片的块状导航</title>
<style type="text/css">
#menu {position:relative; width:300px; height:300px; background:transparent url(http://p1.mb5u.com/texiao/menu_bw.jpg); overflow:hidden; margin:0 auto;}
#menu ul {margin:0; padding:0;}
#menu li {list-style-type:none; width:100px; height:100px; display:inline;}
#menu a {display:block; float:left; width:100px; height:0; overflow:hidden; color:#000; text-decoration:none; padding-top:100px; background:transparent url(http://p1.mb5u.com/texiao/menu_col.jpg) no-repeat 500px 500px;}
* html #menu a  {height:100px; he\ight:0;}
#menu a#item1:hover {background-position: 0 0; z-index:50;}
#menu a#item2:hover {background-position: -100px 0; z-index:50;}
#menu a#item3:hover {background-position: -200px 0; z-index:50;}
#menu a#item4:hover {background-position: 0 -100px; z-index:50;}
#menu a#item5:hover {background-position: -100px -100px; z-index:50;}
#menu a#item6:hover {background-position: -200px -100px; z-index:50;}
#menu a#item7:hover {background-position: 0 -200px; z-index:50;}
#menu a#item8:hover {background-position: -100px -200px; z-index:50;}
#menu a#item9:hover {background-position: -200px -200px; z-index:50;}
</style>
</head>
<body>

所属频道：菜单导航特效/更新时间：2011-02-24

[收藏][报错][返回列表]

CSS黑白变成彩色图片的块状导航_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些