圖片型不規則菜單的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訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些