The CSS
- ul.osx-dock li a {
- display:
block;
- height: 50px;
- padding: 0 1px;
- margin: 0;
- -webkit-transition:
0.15s linear;
- -webkit-transition-property:
-webkit-transform margin;
- -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)));
- }
-
- ul.osx-dock li a img {
- width: 48px;
- }
-
- ul.osx-dock li:hover {
- margin-left:
9px; margin-right: 9px;
- z-index:
200;
- }
-
- ul.osx-dock li:hover a {
- -webkit-transform-origin:
center bottom;
- -webkit-transform:
scale(1.5);
- }
-
- ul.osx-dock li.nearby {
- margin-left:
6px; margin-right: 6px;
- z-index:
100;
- }
-
- ul.osx-dock li.nearby a {
- -webkit-transform-origin:
center bottom;
- -webkit-transform:
scale(1.25);
- }
-
- ul.osx-dock li span {
- background:
rgba(0,0,0,0.75);
- position:
absolute;
- bottom: 80px;
- margin: 0 auto;
- display: none;
- width: auto;
- font-size:
11px;
- font-weight:
bold;
- padding: 3px
6px;
- -webkit-border-radius:
6px;
- color: #fff;
- }
- ul.osx-dock li:hover span {
- display: block;
- }
The HTML
- <ul class="osx-dock">
- <li class="active">
-
<span>ZURB</span>
- <a
href="http://www.zztuku.com" title="ZURB"><img
src="/playground/osx-dock/zurb-icon.png" /></a>
- </li>
- <li>
-
<span>LinkedIn</span>
- <a
href="http://www.zztuku.com" title="LinkedIn"><img
src="/playground/osx-dock/linkedin-icon.png" /></a>
- </li>
适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
代码整理:站长图库