css实现各种导航菜单实现代码 有需要的使用的朋友可参考本文章。
代码
代码如下
复制代码
<!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 content="Lwolf" name="author">
<link rel="stylesheet" href="http://www.phphubei.com/layout/css/css/animate.css">
<style>
*{margin:0;padding:0;}html,body{_height:100%;_overflow:hidden;}body{_overflow:auto;font-family:Arial,sans-serif;font-size:14px;background:#f4f4f4;color:#333;text-shadow:1px 1px 1px #fff;}#header{position:fixed;_position:absolute;left:0px;text-align:center;display:block;height:35px;clear:both;background:#000;margin-bottom:30px;border-bottom:7px solid #ccc;font-size:14px;line-height:35px;text-align:right;font-style:italic;width:100%;}#header a{color:#aaa;text-shadow:1px 1px 1px #000;padding:0px 20px;outline:none;}#header a:hover{color:#fff;}#header a.back{color:#1B80B5;font-weight:bold;display:block;float:right;}#header a.back:hover{color:#fff;}.left{float:left;}.right{float:right;}h1{font-size:42px;font-family:'Cantarell';font-weight:100;letter-spacing:-1px;}h2{font-size:20px;text-indent:4px;font-weight:normal;font-style:italic;color:#a1a1a1;padding:5px 0px 20px 0px;}h2 span{color:#444;}a{color:#777;text-decoration:none;}a:hover{color:#222;}p{padding:5px 0px;}.content{padding:70px;width:80%;margin:0 auto;}#footer{position:fixed;_position:absolute;background:#eee;left:0px;width:100%;height:50px;line-height:50px;bottom:0;background:#f0f0f0;border-top:7px solid #ccc;text-align:center;text-shadow:1px 1px 1px #000;color:#fff;background:#000;}#footer a{color:#aaa;padding:0px 10px;text-shadow:1px 1px 1px #000;}#footer a:hover{color:#fff;text-shadow:0px 0px 1px #fff;}#header{top:0;}
#animateTest{text-align:center;background:#39c;padding:10px;width:180px;color:#fff;margin:0 auto;text-shadow:0 1px 0 rgba(0,0,0,.3);background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0),rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0),rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%);background-image:linear-gradient(-45deg,rgba(255,255,255,0),rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%);border-radius:5px;border:1px solid #17a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font-weight:bold;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-animation-duration:1s;-webkit-animation-delay:.2s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:both;-moz-animation-duration:1s;-moz-animation-delay:.2s;-moz-animation-timing-function:ease;-moz-animation-fill-mode:both;-ms-animation-duration:1s;-ms-animation-delay:.2s;-ms-animation-timing-function:ease;-ms-animation-fill-mode:both;animation-duration:1s;animation-delay:.2s;animation-timing-function:ease;animation-fill-mode:both;}#animateTest p{margin:0;}.butt-small{font-size:0.75em;}.butt{background-color:#EEEEEE;background-image:-moz-linear-gradient(0% 100% 90deg,#CCCCCC,#EEEEEE);border:1px solid #AAAAAA;border-radius:5px 5px 5px 5px;box-shadow:0 1px 0 rgba(255,255,255,0.4) inset;color:#333333;cursor:pointer;display:inline-block;font-weight:700;line-height:1.2em;margin:0.75em 0;padding:0.6em 12px;text-decoration:none;text-shadow:0 1px 0 rgba(255,255,255,0.3);width:auto;}
</style>
</head>
<body>
<div class="content">
<h2> <b>纯CSS实现的动画效果Animate.css </b> </h2>
<span>这是一系列使用CSS实现的动画效果，狠狠点击以下按钮查看各种效果~~ </span>
<h3>Attention seekers </h3>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('flash');">flash </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounce');">bounce </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('shake');">shake </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('tada');">tada </a>
<h3>淡入效果 </h3>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeIn');">fadeIn </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeInUp');">fadeInUp </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeInDown');">fadeInDown </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeInLeft');">fadeInLeft </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeInRight');">fadeInRight </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeInUpBig');">fadeInUpBig </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeInDownBig');">fadeInDownBig </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeInLeftBig');">fadeInLeftBig </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeInRightBig');">fadeInRightBig </a>
<h3>淡出效果 </h3>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeOut');">fadeOut </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeOutUp');">fadeOutUp </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeOutDown');">fadeOutDown </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeOutLeft');">fadeOutLeft </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeOutRight');">fadeOutRight </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeOutUpBig');">fadeOutUpBig </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeOutDownBig');">fadeOutDownBig </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeOutLeftBig');">fadeOutLeftBig </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('fadeOutRightBig');">fadeOutRightBig </a>
<br /> <br />
<div class="flash" id="animateTest">
<p>湖北指数 </p>
</div>
<h3>震动效果 </h3>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceIn');">bounceIn </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceInDown');">bounceInDown </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceInUp');">bounceInUp </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceInLeft');">bounceInLeft </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceInRight');">bounceInRight </a>
<br />
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceOut');">bounceOut </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceOutDown');">bounceOutDown </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceOutUp');">bounceOutUp </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceOutLeft');">bounceOutLeft </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('bounceOutRight');">bounceOutRight </a>
<h3>旋转效果 </h3>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateIn');">rotateIn </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateInDownLeft');">rotateInDownLeft </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateInDownRight');">rotateInDownRight </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateInUpLeft');">rotateInUpLeft </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateInUpRight');">rotateInUpRight </a>
<br />
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateOut');">rotateOut </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateOutDownLeft');">rotateOutDownLeft </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateOutDownRight');">rotateOutDownRight </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateOutUpLeft');">rotateOutUpLeft </a>
<a href="#" class="butt butt-small" onclick="$('#animateTest').removeClass().addClass('rotateOutUpRight');">rotateOutUpRight </a>
<br /> <br />
</div>
<script src="/js/jquery-1.7.1.min.js"> </script>
</body>
</html>
