炫酷的导航条

最新推荐文章于 2023-08-23 18:01:11 发布

ly_zioyne

最新推荐文章于 2023-08-23 18:01:11 发布

阅读量403

点赞数

本文链接：https://blog.csdn.net/ly_zioyne/article/details/53823122

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	body,ul,li{margin: 0px;padding: 0px;}
	.menu{width:750px;height:40px;margin:200px auto;}
	.menu ul li{list-style: none;float: left;width: 150px;line-height:38px;text-align: center;background: #000;color:#fff;position:relative;border-bottom: 1px solid #fff;}
	.menu ul li .momenu{position: absolute;left: 0px;top: 39px;perspective: 500px;
	}
	.menu ul li .momenu li{opacity: 0;perspective: 500px;transform: rotateY(90deg);transition:all 0.5s;}
	.menu ul li:hover .momenu li{opacity:1;transform:rotateY(0deg);}
	.menu li:hover .momenu li:nth-child(1){transition-delay: 0ms;}
	.menu li:hover .momenu li:nth-child(2){transition-delay: 150ms;}
	.menu li:hover .momenu li:nth-child(3){transition-delay: 300ms;}
	.menu li:hover .momenu li:nth-child(4){transition-delay: 450ms;}
	.menu li:hover .momenu li:nth-child(5){transition-delay: 600ms;}
	.menu ul li .momenu1{position: absolute;bottom: 38px;left: 0px;}
	.menu ul li .momenu1 li{opacity: 0;transition: all 0.5s;}
	.menu ul li:hover .momenu1 li{opacity: 1;transform: translateY(234px) rotate(360deg);}
	.menu li:hover .momenu1 li:nth-child(1){transition-delay: 0ms;}
	.menu li:hover .momenu1 li:nth-child(2){transition-delay: 150ms;}
	.menu li:hover .momenu1 li:nth-child(3){transition-delay: 300ms;}
	.menu li:hover .momenu1 li:nth-child(4){transition-delay: 450ms;}
	.menu li:hover .momenu1 li:nth-child(5){transition-delay: 600ms;}
	.menu ul li .momenu2{position: absolute;left:0px;top:39px;}
	.menu ul li .momenu2 li{transition:all 0.5s;opacity: 0;}
	/.menu ul li:hover .momenu2 li{opacity: 1;transform:translateY(100px) translateZ(100px);}/
	</style>
	</head>
	<body>
	<div class="menu">
	<ul>
	<li>公司新闻
	<ul class="momenu">
	<li>电话</li>
	<li>地址</li>
	<li>简介</li>
	<li>动画</li>
	<li>我们</li>
	</ul>

	</li>


	<li>公司简介
	<ul class="momenu1">
	<li>电话</li>
	<li>地址</li>
	<li>简介</li>
	<li>动画</li>
	<li>我们</li>
	</ul>
	</li>

	<li>产品介绍
	<ul class="momenu2">
	<li>电话</li>
	<li>地址</li>
	<li>简介</li>
	<li>动画</li>
	<li>我们</li>
	</ul>

	</li>

	<li>公司留言</li>
	<li>联系我们</li>
	</ul>

	</div>
	</body>
	</html>