图片型不规则菜单的CSs实现方法_图片特效特效

不规则导航菜单的CSs实现方法，呵呵CSS部分其实很容易，就是图片处理稍嫌麻烦，需要一个一个把图片处理好让CSS调用，不过，做出的效果确实挺有新意，适合儿童或艺术网站。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>不规则导航菜单</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=UTF-8" />
<style media="screen">
#blobs {
 width: 300px;
 height: 150px;
 background:url(http://p1.mb5u.com/texiao/1/20110225160524401.gif);
 margin: 10px auto; padding: 0;
 position: relative;
}
#blobs li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
#blobs a {display: block;}
#blob1 {left: 9px; top: 7px; width: 86px; height: 130px;}
#blob2 {left: 77px; top: 16px; width: 79px; height: 86px;}
#blob3 {left: 160px; top: 0px; width: 112px; height: 77px;}
#blob4 {left: 173px; top: 57px; width: 120px; height: 80px;}
#blob5 {left: 110px; top: 102px; width: 98px; height: 45px;}
#blob1 a {height: 130px;}
#blob2 a {height: 86px;}
#blob3 a {height: 77px;}
#blob4 a {height: 80px;}
#blob5 a {height: 45px;}
#blob1 a:hover {background:url(http://p1.mb5u.com/texiao/1/20110225160524401.gif) -10px -307px no-repeat;}
#blob2 a:hover {background:url(http://p1.mb5u.com/texiao/1/20110225160524401.gif) -77px -166px no-repeat;}
#blob3 a:hover {background:url(http://p1.mb5u.com/texiao/1/20110225160524401.gif) -160px -300px no-repeat;}
#blob4 a:hover {background:url(http://p1.mb5u.com/texiao/1/20110225160524401.gif) -173px -207px no-repeat;}
#blob5 a:hover {background:url(http://p1.mb5u.com/texiao/1/20110225160524401.gif) -110px -402px no-repeat;}
 </style>
</head>
<body>
 <ul id="blobs">
  <li id="blob1"><a href="#"></a></li>
  <li id="blob2"><a href="#"></a></li>
  <li id="blob3"><a href="#"></a></li>
  <li id="blob4"><a href="#"></a></li>
  <li id="blob5"><a href="#"></a></li>
 </ul>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-11-21

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

图片型不规则菜单的CSs实现方法_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些