以下是 纯实现CSS3创意导航菜单特效代码 的示例演示效果:
部分效果截图:
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%);}
分享到QQ
分享到微博
微信扫一扫
