css3 模拟 mac 的 菜单图标列表（兼容ie，但ie8及以下效果有差异）

最新推荐文章于 2022-06-27 15:54:32 发布
最新推荐文章于 2022-06-27 15:54:32 发布
阅读量1.7k 收藏
点赞数
分类专栏： css3 button 按钮 面板 文章标签： css3 button 按钮 面板 菜单
css3 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
button
5 篇文章 0 订阅
订阅专栏
按钮
5 篇文章 0 订阅
订阅专栏

对于原文进行了浏览器兼容性的修改，原文地址：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>

效果图：


其它用到的图片：

dock-background-left.png


google-icon.png


facebook-icon.png


lastfm-icon.png


linkedin-icon.png


notable-icon.png


zurb-icon.png



snow_finland
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
兼容IE8插件（兼容h5+css3新特性）
03-04
这是一个对IE8及以下做前端兼容的文件工具包，使用时可参考如下实例在文件里引入即可 <!--对于ie6到ie8做兼容，兼容h5，css3等新特性--> <!--[if (gte IE 6)&(lte IE 8)]> [removed][removed] [removed]...
css3 模拟 mac 的 菜单图标列表（兼容ie，但ie8及以下效果有差异） 分类： ...
weixin_30855761的博客
02-12 117
对于原文进行了浏览器兼容性的修改，原文地址：http://zurb.com/playground/osx-dock 由于ie8及以下不支持scale属性，所以ie8及以下的图标不会有缩放效果 由于ie9不支持transition属性，所以ie9不会有缓慢的动画式变化效果 由于只有Chrome和Safari支持倒影的属性（-webkit-box-reflect），所以只有C...
苹果状态栏HTML,CSS3实现苹果电脑的DOCK菜单栏
weixin_39790877的博客
05-31 453
使用苹果电脑的朋友,都知道,在桌面的下方有个DOCK,就是一个存放应用程序的一栏.使用起来非常方便.这一栏的一些效果也是挺好看的.那我们今天就用CSS3来实现这个原理.首先我们需要设计好DOCK栏结构,代码如下代码名称菜单一菜单二菜单三然后设置相关的展示效果CSS代码代码名称ul,li{list-style: none;}ul{margin: 0 auto;width: 600px;height:...
CSS3实现类mac风格的文件夹打开效果
webdev
05-04 886
1.效果分析 纯css实现的类mac风格的文件夹打开效果，效果下图所示，具体效果参见demo。代码解析简单起见，仅仅支持firefox浏览器，感兴趣的读者可以自行支持其他浏览器。 主要使用linear-gradient、border-radius、box-shadows实现绘图，使用transform、transition实现动画。 2.技术难点 难点1在于利用before和aft...
Jquery append 方法在ie8不兼容问题
water_v的博客
10-31 1424
var $a=$("<a>");　　$("body").append($a);　　这段代码在ie8下不兼容,怎么也添加不鸟元素，改成如下即可行：　　　　var $a=$("<a></a>");　　$("body").append($a);　　总结：ie对动态append的内容有要求，需要将一个具有完整意义的html一起append到代码中
纯CSS仿MAC BOOK
NINE-NINE的博客
03-30 1727
纯CSS仿MAC BOOK
DIV+CSS相对IE6 IE7和IE8浏览器行为区别及兼容性问题整理
01-21
本文向大家简单描述一下DIV+CSS相对IE6 IE7和IE8兼容问题整理，重点介绍一下IE6 IE7和IE8等浏览器的区别和联系，相信本文介绍一定会让你有所收获。 DIV+CSS相对IE6 IE7和IE8兼容问题整理 1.区别IE和非IE浏览器 ...
支持IE8的纯css3开发的响应式设计动画菜单教程
01-19
单击列表图标，当你显示屏大小可以完全水平放下所有菜单项时，菜单水平显示（如图1）。当你的显示屏不能水平放置所有菜单项时，菜单垂直显示（如图2）。 而且显示的时候是以动画的型式显示。效果相当的好。 图1 图...
IE6、IE7、IE8、Firefox兼容性CSS HACK代码及示例
12-13
1.区别IE和非IE浏览器CSS HACK代码 复制代码代码如下:#divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「...
CSS横向下拉菜单(兼容IE6)
12-13
由于我的IE是IE7的，所以起初没有意识到那个下拉菜单在IE6中不能显示，今天刚把IE7卸了装了IE6，一般的，由于CSS驱动的下拉菜单不能在IE6中正常工作，大多数人会选择用JavaScript去实现下拉菜单，但其实CSS也可以...
background: transparent url(../images/bbs_sprite.png)no-repeat 0px -1303px; IE8 兼容写法
沈荣荣的博客
02-29 3955
最近一直在调浏览器兼容的问题，问题千奇百怪，原因千奇百怪，现象千奇百怪： 今天遇到一个让我真心无语的问题，折腾了一上午，和大家分享一下： 描述一下我的问题：做了一个消息提示，但是发现，360 兼容模式，IE8 是没有提示的，也就是使用IE8 内核的浏览器都没哟提示，其他情况下都可以； 后来终于发现： 1.IE8 内核是不能识别transparent 的； 2.    ba
CSS 样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别
wgxcn的专栏
06-25 448
CSS 样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别
MAC风格图标
weixin_34314962的博客
01-07 1056
jQuery.i18n使用过程中IE浏览器一直报脚本错
坐忘峰
04-22 2901
项目中的js需要做国际化，就引入了jQuery.i18n来处理。结果发现当加入如com.test.delete的时候，IE8一直报脚本错误“缺少标识符"，而IE9是没有问题的。经过调试发现有这样一句even('typeof  ' + fullname + ' == "undefined"');，错误正是由此而来，其中变量fullname的值正好是com.test.delete的时候报了错。经过试验
svg仿mac最小化效果
weixin_40863414的博客
08-02 956
mac电脑上有一个魔性的最小化窗户口效果，用网页的svg模拟了下: 这个最大的难度就是去用svg绘制那些曲线，其实你会发现如果你直接去绘制，会很难下手，因为绘制曲线无非就是利用贝赛尔曲线，但是它这个是一个整体缩小的过程，不是很容易的绘制出来，因此我们可以换一个思路，我们利用svg的mask来进行遮罩，这样的话，我们只要绘制完整的缩小svg就好了： 上图就是一个完整的缩小的svg，这个还...
-webkit-box-reflect属性简介及元素镜像倒影实现
ligaogang的专栏
12-24 3072
一、从前有只鸭子 从前有只鸭子，长得不是一般的丑： 于是，鸭子一直很自卑，从来不敢照镜子，也不敢下河游泳。别的鸭子很喜欢下河游泳，因为可以一边玩耍，一边上WC，让吃进去的东西舒舒服服从后面出来；而这只鸭子一旦下河，吃进去的东西只会是从前面出来，因为总会不经意看到自己的脸。 就这样很过去了很多很多年，世事变化无常，当年会说话住山洞被鸭子调戏的猩猩逆袭现在住进了动物界的五星级
仿Mac程序坞放大动画
qq_45472813的博客
06-27 1357
笔者近期换了台MacBook笔记本💪🏽，使用中发现当鼠标hover到它的程序坞时，有一个非常丝滑的放大动画。感觉非常有意思🤩，趁周末实现下，最后分享给屏幕前爱学习的您!😉真实MacBook笔记本放大动画：仿写的放大动画： 实现的关键就是运用了勾股定理计算，所以咱们要复习下初中时期的数学。勾股定理：平面上的直角三角形的两条直角连长的长度的平方和等于斜边长的平方简化成一个公式:a2+b2=c2简单复习下勾股定理，然后将公式对应到咱们的放大动画中。 上图中，假设三角形▲是鼠标，圆○为电脑桌面程序坞中某个应...
css-dock-menu 超漂亮的仿MAC的菜单-本人收藏
PHP 专区
05-26 522
css-dock-menu 超漂亮的仿MAC的菜单-本人收藏 我就不描述了,我不是来买这个东西的,再加上这个东西也不是我写的,只是拿来跟大家分享 想看的就自己下载下来,如果已经见过来些收藏品了,就当作是没有看到些消息!     http://www.sex2city.cn 新开发的一个网站。  ...
ie不兼容css3 渐变色,CSS3兼容IE、Safari、Firefox背景颜色渐变
最新发布
05-25
是的，IE浏览器不支持CSS3中的渐变色，但可以使用IE滤镜来实现类似的效果。以下是一个使用CSS3和IE滤镜来实现渐变色的示例： ```css /* CSS3 */ background: linear-gradient(to bottom, #ff0000, #0000ff); /* IE...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值