纯实现CSS3创意导航菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯实现CSS3创意导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3创意导航菜单特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Docs</a></li>
			<li><a href="#">Demos</a></li>
			<li><a href="#">中文</a></li>
		</ul>
	</nav>
</div>
</body>
</html>

CSS代码(style.css):

body{color:#aaaaaa;font-family:'Goudy Bookletter 1911',serif;/*background-color:#222;*/
background:#494A5F;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","����","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
div.container{text-align:center;margin:0px;min-height:600px;}
h1{font-size:64px;text-align:center;font-weight:300;padding:.5em;margin:0;}
h2{font-size:24px;text-align:center;font-weight:300;margin:0;}
body nav{text-align:center;margin-top:60px;margin-bottom:40px;position:relative;}
ul{list-style-type:none;margin-left:-40px;}
li{display:inline-block;}
a{color:#aaaaaa;text-decoration:none;}
a:hover{color:white;}
li a{display:block;font-size:20px;text-align:center;padding:10px 15px;}
li a:hover{transform:rotate(5deg) scale(1.1);}
li a:hover:before,li a:hover:after{transition:all 0.3s ease;opacity:1;width:20px;}
li a:before,li a:after{opacity:0;border-top:1px solid white;content:'';display:block;position:relative;z-index:-1;margin:auto;width:0px;}
li a:before{top:0px;transform:rotate(120deg) translateY(-50%) translateX(-50%);}
li a:after{top:5px;transform:rotate(-60deg) translateY(-50%) translateX(-50%);}

附件:下载该文件资源,减少时间成本(增值服务)