纯CSS系列教程–实现气泡效果（bubble effect） | ria之家

纯CSS系列教程–实现气泡效果（bubble effect）

发布于2010年06月5日，归属于css ,css3 ,html5。 前4个座位已被强势霸占！ 共有651人围观    

这个效果是不是很熟悉啊~对啦，JQDock可以轻松实现这样的效果，那么我们就来学习一下，用纯CSS的两种方式，来实现同样酷的效果。

• 点此下载

一、先来看第一种方式（基本）：

1.首先HTML列表用ul li：

1. <ul id="bubble">
2.       <li>
3.         <a class="icon feed" href="http://feeds2./prlamnguyen" title="Full RSS Feed">Full RSS Feed</a>
4.       </li>
5.       <li>
6.         <a class="icon email" href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Feed via Emal">Feed via email</a>
7.       </li>
8.       <li>
9.         <a class="icon twitter" href="http://twitter.com/prlamnguyen" title="Full RSS Feed">Follow me on Twitter</a>
10.       </li>
11.       <li>
12.         <a class="icon facebook" href="http:///duylamng" title="Full RSS Feed">I'm on Facebook</a>
13.       </li>
14.       <li>
15.         <a class="icon delicious" href="http:///save" onclick="window.open('http:///save?v=5&noui&jump=close&url=http://&title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Full RSS Feed">Save me</a>
16.       </li>
17.       <li>
18.         <a class="icon technorati" href="http:///faves?sub=addfavbtn&add=http://" title="Full RSS Feed">Fave me</a>
19.       </li>
20.     </ul>

2.准备图片，如下图样子：

3.准备好图片后，用css定义链接的默认背景为你所用到的图片

1. #bubble {
2.     list-style: none;
3.     margin: 0px;
4.     padding: 0px;
5. }
6. #bubble li {
7.     display: inline-block;
8.     margin: 0px;
9.     padding: 0px;
10.  
11. }
12.  
13. #bubble li a.icon {
14.     background: url(images/sprites.png) no-repeat;
15.     border: none;
16.     display: block;
17.     width: 128px;
18.     height: 128px;
19.     text-indent: -9999px;
20. }

4.然后对每个链接样式进行定义

默认为显示小图标，当鼠标移上时让其显示大图标，这里注意的是，一定要给要显示的图片找准坐标。

1. #bubble li a.feed {
2.     background-position: -139px -12px;
3. }
4. #bubble li a.feed:hover {
5.     background-position: -13px -12px;
6. }
7. #bubble li a.email {
8.     background-position: -139px -149px;
9. }
10. #bubble li a.email:hover {
11.     background-position: -13px -149px;
12. }
13. #bubble li a.twitter {
14.     background-position: -139px -283px;
15. }
16. #bubble li a.twitter:hover {
17.     background-position: -13px -283px;
18. }
19. #bubble li a.facebook {
20.     background-position: -139px -422px;
21. }
22. #bubble li a.facebook:hover {
23.     background-position: -13px -422px;
24. }
25. #bubble li a.delicious {
26.     background-position: -139px -559px;
27. }
28. #bubble li a.delicious:hover {
29.     background-position: -13px -559px;
30. }
31. #bubble li a.technorati {
32.     background-position: -139px -698px;
33. }
34. #bubble li a.technorati:hover {
35.     background-position: -13px -698px;
36. }

OK，这样第一种方式就实现了。

二、再来看下一种方式（进阶）：

1.这种方式将使用多一些的html代码，但是你将看到更少的css代码。

HTML代码如下

1. <ul id="bubble2">
2.       <li>
3.         <a href="http://feeds2./prlamnguyen" title="Full RSS Feed">
4.             <img class="small" src="images/feed.png" alt="Full RSS" />
5.             <img class="large" src="images/feed_large.png" alt="Full RSS" />
6.         </a>
7.       </li>
8.       <li>
9.         <a href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Feed via Emal">
10.             <img class="small" src="images/email.png" alt="Feed via Emal" />
11.             <img class="large" src="images/email_large.png" alt="Feed via Emal" />
12.         </a>
13.       </li>
14.       <li>
15.         <a href="http://twitter.com/prlamnguyen" title="Follow me on Twitter">
16.             <img class="small" src="images/twitter.png" alt="Follow me on Twitter" />
17.             <img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" />
18.         </a>
19.       </li>
20.       <li>
21.         <a href="http:///duylamng" title="I'm on Facebook">
22.             <img class="small" src="images/facebook.png" alt="I'm on Facebook" />
23.             <img class="large" src="images/facebook_large.png" alt="I'm on Facebook" />
24.         </a>
25.       </li>
26.       <li>
27.         <a href="http:///save" onclick="window.open('http:///save?v=5&noui&jump=close&url=http://&title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Save me">
28.             <img class="small" src="images/delicious.png" alt="Save me" />
29.             <img class="large" src="images/delicious_large.png" alt="Save me" />
30.         </a>
31.       </li>
32.       <li>
33.         <a href="http:///faves?sub=addfavbtn&add=http://" title="Fave me on Technorati">
34.             <img class="small" src="images/technorati.png" alt="Fave me on Technorati" />
35.             <img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" />
36.         </a>
37.       </li>
38.     </ul>

2.在这里我们要做一些变动

在鼠标悬浮在链接上时，我们大图标显示在小图标上面，第一种方式和第二种方式的区别在于，第二种方式你需要设置元素的height和width。为什么呢？原因是我们不想再鼠标移上链接时让列表移动或者大小改变，于是css代码应该像这样：

1. #bubble2 {
2.     list-style: none;
3.     margin: 20px 0px 0px;
4.     padding: 0px;
5. }
6. #bubble2 li {
7.     display: inline-block;
8.     margin: 0px 5px;
9.     padding: 0px;
10.     width: 72px;
11.     height: 72px;
12. }

72px是小图标的width，你可以设置的大一些，但是不要太大。

链接的css代码如下：

1. #bubble2 li a img {
2.     position: relative;
3.     border: none;
4. }
5.  
6. #bubble2 li a img.large {
7.     display: none;
8. }
9.  
10. #bubble2 li a:hover img.small {
11.     display: none;
12.     z-index: 0;
13. }
14.  
15. #bubble2 li a:hover img.large {
16.     display: block;
17.     margin-top: -28px;
18.     margin-left: -28px;
19.     z-index: 1000;
20. }

切记一定要把图片的位置关系设置为relative！因为这里我们要设置Z-index，只有位置关系式relative或者absolute时才有作用。

3.当鼠标移上小图标时，设置margin为-28px

如图:

OK~最后给IE做个设置，以便正确显示

1. <!--[if IE 7]>
2. <style type="text/css">
3. #bubble li, #bubble2 li {
4.     display: inline;
5. }
6. </style>
7. <![endif]-->

另外，本文未做IE6兼容测试，同时银月闪舞在测试demo过程中发现在IE8下方式二显示不太正常，具体原因暂时说不清楚，添加如下代码可以使显示正常：

1. <!--[if IE 8]>
2. <style type="text/css">
3. #bubble2 li a:hover img.large {
4.     margin-top: -100px;
5. }
6. </style>
7. <![endif]-->

原文链接

from:http://www./2388