The CSS

  1. ul.osx-dock li a {
  2. display: block;
  3. height: 50px;
  4. padding: 0 1px;
  5. margin: 0;
  6. -webkit-transition: 0.15s linear;
  7. -webkit-transition-property: -webkit-transform margin;
  8. -webkit-box-reflect: below 2px; -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
  9. }
  10.  
  11. ul.osx-dock li a img {
  12. width: 48px;
  13. }
  14.  
  15. ul.osx-dock li:hover {
  16. margin-left: 9px; margin-right: 9px;
  17. z-index: 200;
  18. }
  19.  
  20. ul.osx-dock li:hover a {
  21. -webkit-transform-origin: center bottom;
  22. -webkit-transform: scale(1.5);
  23. }
  24.  
  25. ul.osx-dock li.nearby {
  26. margin-left: 6px; margin-right: 6px;
  27. z-index: 100;
  28. }
  29.  
  30. ul.osx-dock li.nearby a {
  31. -webkit-transform-origin: center bottom;
  32. -webkit-transform: scale(1.25);
  33. }
  34.  
  35. ul.osx-dock li span {
  36. background: rgba(0,0,0,0.75);
  37. position: absolute;
  38. bottom: 80px;
  39. margin: 0 auto;
  40. display: none;
  41. width: auto;
  42. font-size: 11px;
  43. font-weight: bold;
  44. padding: 3px 6px;
  45. -webkit-border-radius: 6px;
  46. color: #fff;
  47. }
  48. ul.osx-dock li:hover span {
  49. display: block;
  50. }

The HTML

  1. <ul class="osx-dock">
  2. <li class="active">
  3. <span>ZURB</span>
  4. <a href="http://www.zztuku.com" title="ZURB"><img src="/playground/osx-dock/zurb-icon.png" /></a>
  5. </li>
  6. <li>
  7. <span>LinkedIn</span>
  8. <a href="http://www.zztuku.com" title="LinkedIn"><img src="/playground/osx-dock/linkedin-icon.png" /></a>
  9. </li>
  • ZURB
  • LinkedIn
  • Notable
  • last.fm
  • Facebook
  • Google
  • Notable
  • last.fm
  • Facebook
  • Google

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

代码整理:站长图库