<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
a{
text-decoration:none;
}
#header,#nav{
width:1200px;
margin:auto 0;
}
#logo{
display: block;
background-image:url(../common/image/logo.jpg);
width:114px;
position:relative;
height:80px;
background-repeat: no-repeat;
float:left;
background-position: 0 0;
background-size: 114px 80px;
transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
#logo:hover{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg);
}
.bar{
display:none;
list-style: none;
line-height: 80px;
width: 80px;
height:80px;
float:left;
position:absolute;
text-align: center;
}
.change{
position: relative;
display:block;
}
.bar a{
font: 12px/1.5 "Microsoft YaHei",tahoma,arial,Hiragino Sans GB,\5b8b\4f53;
}
</style>
<body>
<div id="header">
<div id="nav">
<div id="logo"></div>
<ul>
<li class="bar" id="bar1"> <a href="###">Home</a></li>
<li class="bar" id="bar2"> <a href="###">Product</a></li>
<li class="bar" id="bar3"> <a href="###">Desiger</a></li>
<li class="bar" id="bar4"> <a href="###">Blog</a></li>
<li class="bar" id="bar5"> <a href="###">About</a></li>
</ul>
</div>
</div>
</body>
<script src="../common/js/jquery.js"></script>
<script src=../common/js/jquery.easing.min.js></script>
<script>
$("#logo").hover(function(){
$("#bar1").css({"display":"block"}).animate({
left:"120px"},
{
easing:"easeOutBounce",
duration:1100
})
$("#bar2").css({"display":"block"}).animate({
left:"200px"},
{
easing:"easeOutBounce",
duration:1000
})
$("#bar3").css({"display":"block"}).animate({
left:"280px"},
{
easing:"easeOutBounce",
duration:900
})
$("#bar4").css({"display":"block"}).animate({
left:"360px"},
{
easing:"easeOutBounce",
duration:800
})
$("#bar5").css({"display":"block"}).animate({
left:"440px"},
{
easing:"easeOutBounce",
duration:700
})
})
</script>
</html>
