css3 模擬 mac 的菜單圖標列表（兼容ie，但ie8及如下效果有差別）分類： css3 button 按鈕面板 2014-02-12 14:21 741人閱讀評論(0) 收藏

時間 2019-11-20

標籤 css3 css 模擬 mac 菜單圖標列表兼容 ie8 如下效果差別分類 button 按鈕面板閱讀評論收藏欄目 CSS 简体版

原文原文鏈接

對於原文進行了瀏覽器兼容性的修改，原文地址：http://zurb.com/playground/osx-dock
javascript

因爲ie8及如下不支持scale屬性，因此ie8及如下的圖標不會有縮放效果css

因爲ie9不支持transition屬性，因此ie9不會有緩慢的動畫式變化效果html

因爲只有Chrome和Safari支持倒影的屬性（-webkit-box-reflect），因此只有Chrome和Safari有這個效果java

<!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>

效果圖：
web