以下是 css3动态导航菜单模版特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link href="css/move.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- 代码 开始 -->
<ul class="list">
<li>
<div class="border"></div>
<span class="icon">Z</span>
<div class="text">
<h2><a href="http://www.baidu.com" target="_blank">首页</a></h2>
<h3>home</h3>
</div>
</li>
<li>
<div class="border"></div>
<span class="icon">N</span>
<div class="text">
<h2><a href="http://www.baidu.com" target="_blank">联系我们</a></h2>
<h3>contact us</h3>
</div>
</li>
<li>
<div class="border"></div>
<span class="icon">S</span>
<div class="text">
<h2><a href="http://www.baidu.com" target="_blank">关于我们</a></h2>
<h3>about us</h3>
</div>
</li>
<li>
<div class="border"></div>
<span class="icon">F</span>
<div class="text">
<h2><a href="http://www.baidu.com" target="_blank">包子的博客</a></h2>
<h3>包子的博客</h3>
</div>
</li>
<li>
<div class="border"></div>
<span class="icon">B</span>
<div class="text">
<h2><a href="http://www.baidu.com" target="_blank">Html教程</a></h2>
<h3>Html教程</h3>
</div>
</li>
</ul>
<!-- 代码 结束 -->
</body>
</html>
CSS代码(move.css):
/*reset*/
body,ul,li,h2,h3,div{margin:0;padding:0;border:0;}
body{font-size:12px;font-family:"Microsoft YaHei";}
ul{list-style-type:none;}
a{text-decoration:none;}
body{background:url(../images/beige_paper.png) left top repeat;}
@font-face{font-family:'WebSymbolsRegular';src:url('websymbols.woff');src:url('websymbols.woff') format('woff'),url('websymbols.ttf') format('truetype');font-weight:normal;font-style:normal;}
.list{width:100%;height:auto;margin-top:50px;}
.list li{width:500px;margin:0 auto;height:100px;margin-bottom:10px;background:#FFF;box-shadow:2px 2px 4px rgba(0,0,0,0.2);-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;-ms-transition:0.3s all ease;-o-transition:0.3s all ease;transition:0.3s all ease;overflow:hidden;position:relative;}
.list .border{height:100px;position:absolute;left:0;top:0;width:10px;overflow:hidden;opacity:0;background:#F90;-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;-ms-transition:0.3s all ease;-o-transition:0.3s all ease;-webkit-transition:.5s left ease;}
.list li:hover{background:#000;box-shadow:2px 2px 4px rgba(0,0,0,0.4);}
.list li:hover .border{opacity:1;left:490px;}
.text h2,.text a{font-family:"Microsoft YaHei";color:#333;text-shadow:1px 2px 4px #999;font-size:30px;font-weight:normal;-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;-ms-transition:0.3s all ease;-o-transition:0.3s all ease;}
.text h3{font-family:Verdana;font-size:14px;color:#666;font-weight:normal;-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;-ms-transition:0.3s all ease;-o-transition:0.3s all ease;}
.list li:hover h2,.list li:hover a{color:#FFF;font-size:18px;text-shadow:1px 2px 4px #333;}
.list li:hover .text h3{color:#F60;font-size:18px;margin-top:10px;}
.list li .icon{width:90px;height:90px;margin-left:20px;margin-top:5px;margin-right:20px;float:left;font-size:30px;font-family:'WebSymbolsRegular';line-height:90px;text-align:center;-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;-ms-transition:0.3s all ease;-o-transition:0.3s all ease;text-shadow:0 0 3px #CCCCCC;}
.list li:hover .icon{color:#F90;font-size:50px;}
.list li:hover .text{-webkit-animation-name:shake;-moz-animation-name:shake;}
.text{width:300px;height:auto;float:left;margin-top:24px;height:70px;-webkit-animation:.5s .2s ease both;-moz-animation:1s .2s ease both;}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);}
20%,60%{-webkit-transform:translateX(-10px);}
40%,80%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0);}
20%,60%{-moz-transform:translateX(-10px);}
40%,80%{-moz-transform:translateX(10px);}
}
分享到QQ
分享到微博
微信扫一扫
