CSS实现平板菜单

最新推荐文章于 2020-01-04 12:52:04 发布

Monarch_lin

最新推荐文章于 2020-01-04 12:52:04 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： web前端平板

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

效果如下：

HTML：

<!DOCTYPE html>
<html>
<head>
	<title>Mac menu</title>
	<meta charset="utf-8"></head>
	<style type="text/css">
	.box{text-align: center;margin: 200px 0;}
	.box ul{list-style-type: none;}
	.box ul li{
		width: 60px;
		height: 60px;
		float: left;
		position: relative;
		/*设置平滑过渡当:hover触发时相应*/
		-webkit-transition:.2s ease;
		-moz-transition:.2s ease;
		transition:.2s ease;
	}
	.box ul li:before{
		width: 0;
		padding: 2px 5px;
		position: absolute;
		left: 40px;
		content: attr(title);
		background: #000;
		color: #fff;
		opacity: 0;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		/*设置垂直方向平移*/
		transform:translateY(-40px);
		/*设置线性过渡当:hover触发时相应*/
		-moz-transition:.2s linear .2s;
		-webkit-transition:.2s linear .2s;
		transition:.2s linear .2s;
		font:12px/12px blod 'Microsoft YaHei';
		
	}
	.box ul li:hover:before{
		width: 80px;
		opacity: 1;
		left: -5px;
		display: block;
	}
	.box ul li:hover{
		width:80px;
		height:80px;
		margin-top:-20px;
	}
	.box ul li.pre,
    .box ul li:hover+li{width:70px;margin-top:-10px;}
	.box ul li img{width: 100%;}
	</style>

<body>
	<div class="box">
		<ul id="dock">
			<li title="Internet Explorer" class="">
				<img src="./Mac Dock_files/ie.png" alt=""></li>
			<li title="Mozilla FireFox" class="">
				<img src="./Mac Dock_files/firefox.png" alt=""></li>
			<li title="Chrome" class="">
				<img src="./Mac Dock_files/chrome.png" alt=""></li>
			<li title="Safari" class="">
				<img src="./Mac Dock_files/safari.png" alt=""></li>
			<li title="Opera" class="">
				<img src="./Mac Dock_files/opera.png" alt=""></li>
			<li title="Netscape" class="">
				<img src="./Mac Dock_files/netscape.png" alt=""></li>
			<li title="TheWorld" class="">
				<img src="./Mac Dock_files/theWorld.png" alt=""></li>
		</ul>
	</div>
</body>
</html>

原文地址：点击打开链接