您的位置：首页 > Web前端 > CSS

css3 模拟 mac 的菜单图标列表（兼容ie，但ie8及以下效果有差异）分类： css3 button 按钮面板 2014-02-12 14:21 741人阅读评论(0) 收藏

2014-02-12 14:21 676 查看

对于原文进行了浏览器兼容性的修改，原文地址：http://zurb.com/playground/osx-dock

由于ie8及以下不支持scale属性，所以ie8及以下的图标不会有缩放效果

由于ie9不支持transition属性，所以ie9不会有缓慢的动画式变化效果

由于只有Chrome和Safari支持倒影的属性（-webkit-box-reflect），所以只有Chrome和Safari有这个效果

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Recreating the OS X Dock | Playground from ZURB</title>
<style type="text/css">
body{
background-color: #000;
}
*{
margin:0;
padding:0;
}
img{
border:0;
}
/* Dock styles */
div.cap {
display: block;
height: 100px;
width: 40px;
background: url(dock-background-left.png) bottom left no-repeat;
}
div.cap.left {
position: absolute;
bottom: 0px;
left: 0px;
}
ul.osx-dock {
display: inline-block;
height: 130px;
padding: 0 40px 0 0;
background: url(dock-background-left.png) no-repeat right bottom;
overflow: hidden;
margin: 0 0 0 40px;
}
ul.osx-dock li {
display: block;
position: relative;
float: left;
width: 50px;
height: 50px;
margin: 60px 0 4px 0;
transition: 0.15s linear;
-moz-transition: 0.15s linear;	/* Firefox 4 */
-webkit-transition: 0.15s linear;	/* Safari 和 Chrome */
-o-transition: 0.15s linear;	/* Opera */
transition-property:transform margin;
-moz-transition-property: -moz-transform margin;/* Firefox 4 */
-webkit-transition-property:-webkit-transform margin; /* Safari 和 Chrome */
-o-transition-property:-0-transform margin; /* Opera */
text-align: center;
}
ul.osx-dock li a {
display: block;
height: 50px;
padding: 0 1px;
transition: 0.15s linear;
-moz-transition: 0.15s linear;	/* Firefox 4 */
-webkit-transition: 0.15s linear;	/* Safari 和 Chrome */
-o-transition: 0.15s linear;	/* Opera */
transition-property:transform margin;
-moz-transition-property: -moz-transform margin;/* Firefox 4 */
-webkit-transition-property:-webkit-transform margin; /* Safari 和 Chrome */
-o-transition-property:-0-transform margin; /* Opera */
margin: 0;
-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 {
transform: scale(1.5);
-ms-transform: scale(1.5);		/* IE 9 */
-webkit-transform: scale(1.5);	/* Safari and Chrome */
-o-transform: scale(1.5);		/* Opera */
-moz-transform: scale(1.5);		/* Firefox */
transform-origin:center bottom;
-ms-transform-origin:center bottom; 		/* IE 9 */
-webkit-transform-origin:center bottom;	/* Safari 和 Chrome */
-moz-transform-origin:center bottom;		/* Firefox */
-o-transform-origin:center bottom;		/* Opera */
}
ul.osx-dock li.nearby {
margin-left: 6px;
margin-right: 6px;
z-index: 100;
}
ul.osx-dock li.nearby a {
transform: scale(1.25);
-ms-transform: scale(1.25);		/* IE 9 */
-webkit-transform: scale(1.25);	/* Safari and Chrome */
-o-transform: scale(1.25);		/* Opera */
-moz-transform: scale(1.25);		/* Firefox */
transform-origin:center bottom;
-ms-transform-origin:center bottom; 		/* IE 9 */
-webkit-transform-origin:center bottom;	/* Safari 和 Chrome */
-moz-transform-origin:center bottom;		/* Firefox */
-o-transform-origin:center bottom;		/* Opera */
}
ul.osx-dock li span {
position: absolute;
bottom: 80px;
margin: 0 auto;
display: none;
width: auto;
font-size: 11px;
font-weight: bold;
padding: 3px 6px;
color: #fff;
}
ul.osx-dock li:hover span {
display: block;
}
div#dockContainer {
position: fixed;
bottom: 12px;
height: 120px;
padding: 50px 0 0;
text-align: center;
border-radius: 6px;
width: 100%;
line-height: 1;
z-index: 100;
}
div#dockWrapper {
width: auto;
display: inline-block;
position: relative;
border-bottom: solid 2px rgba(255,255,255,.35);
line-height: 0;
}
#dockContainer, #dockContainer * {
box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
-webkit-box-sizing:content-box; /* Safari */
}
</style>
</head>

<body class="off-canvas hide-extras antialiased dark-page">
<section role="main" class="body">
<div id="dockContainer">
<div id="dockWrapper">
<div class="cap left"></div>
<ul class="osx-dock">
<li>
<span>ZURB</span>
<a href="http://www.zurb.com" title="ZURB"><img alt="Zurb icon" src="zurb-icon.png" /></a>
</li>
<li>
<span>LinkedIn</span>
<a href="http://www.linkedin.com" title="LinkedIn"><img alt="Linkedin icon" src="linkedin-icon.png" /></a>
</li>
<li>
<span>Notable</span>
<a href="http://www.notableapp.com" title="Notable"><img alt="Notable icon" src="notable-icon.png" /></a>
</li>
<li>
<span>last.fm</span>
<a href="http://www.last.fm" title="Last.fm"><img alt="Lastfm icon" src="lastfm-icon.png" /></a>
</li>
<li>
<span>Facebook</span>
<a href="http://www.facebook.com" title="Facebook"><img alt="Facebook icon" src="facebook-icon.png" /></a>
</li>
<li>
<span>Google</span>
<a href="http://www.google.com" title="Google"><img alt="Google icon" src="google-icon.png" /></a>
</li>
<li>
<span>Notable</span>
<a href="http://www.notableapp.com" title="Notable"><img alt="Notable icon" src="notable-icon.png" /></a>
</li>
<li>
<span>last.fm</span>
<a href="http://www.last.fm" title="Last.fm"><img alt="Lastfm icon" src="lastfm-icon.png" /></a>
</li>
<li>
<span>Facebook</span>
<a href="http://www.facebook.com" title="Facebook"><img alt="Facebook icon" src="facebook-icon.png" /></a>
</li>
<li>
<span>Google</span>
<a href="http://www.google.com" title="Google"><img alt="Google icon" src="google-icon.png" /></a>
</li>
</ul>
</div>
</div>
</section>
<script type="text/javascript">
$(document).ready(function(){
$("ul.osx-dock li").each(function (type) {
$(this).hover(function () {
$(this).prev("li").addClass("nearby");
$(this).next("li").addClass("nearby");
},
function () {
$(this).prev("li").removeClass("nearby");
$(this).next("li").removeClass("nearby");
});
});
});
</script>
</body>
</html>

效果图：