搜索 |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*body{background: #222}*/
*{margin: 0px;padding:0px;}
.warp{
margin: 200px auto;width: 1000px;border: 2px solid #42A5DC;
height: 58px;font-size: 0px; border-radius: 6px;
}
div.box{
width: 200px; height: 60px;display: inline-block;
position: relative;font-size: 14px;
}
.box a{
display: inline-block; width: 200px;
height: 60px; text-align: center;line-height: 60px;
}
.animate_box{
width: 400px;height: 258px; position: absolute;
margin-left: -100px;margin-top: -100px;z-index: -1;opacity: 0;
transition:all 0.3s ease;
}
.animate_box_hover{
background: #2dcfec; width:200px; height: 58px; margin-left: 0px;
margin-top: 0px; opacity: 1;
}
.box a:hover{
color: red;
}
.nav_dotted{
position: absolute; height: 0px; top: -1px; left: 0px; width: 0px;
border: 44px solid transparent; border-top-width: 16px;
border-left-width: 18px; border-right-width: 0px; border-left-color: #98CEE9;
}
.nav_line{
height: 2px; width: 183px; background: #98CEE9; position: absolute;
top: 16px; left: 17px;
}
</style>
</head>
<body>
<div class="warp">
<div class="box">
<div class="animate_box"></div>
<div class="nav_dotted"></div>
<div class="nav_line"></div>
<a href="javascript:;">THINKPHP</a>
</div>
<div class="box">
<div class="animate_box"></div>
<div class="nav_dotted"></div>
<div class="nav_line"></div>
<a href="javascript:;">THINKPHP</a>
</div>
<div class="box">
<div class="animate_box"></div>
<div class="nav_dotted"></div>
<div class="nav_line"></div>
<a href="javascript:;">THINKPHP</a>
</div>
<div class="box">
<div class="animate_box"></div>
<div class="nav_dotted"></div>
<div class="nav_line"></div>
<a href="javascript:;">THINKPHP</a>
</div>
<div class="box">
<div class="animate_box"></div>
<div class="nav_dotted"></div>
<div class="nav_line"></div>
<a href="javascript:;">THINKPHP</a>
</div>
</div>
<script type="text/javascript" src="/wskin/js/jquery.js"></script>
<script type="text/javascript">
$(".box a").hover(function(){
$(this).siblings(".animate_box").addClass("animate_box_hover")
},function(){
$(this).siblings(".animate_box").removeClass("animate_box_hover")
})
</script>
</body>
</html>
效果图: