<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>面包导航切换动画效果</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
.wrap {
width:48px;
height:30px;
border:1px solid #ccc;
position:relative;
}
span {
height:2px;
position:absolute;
color:#484848;
width:30px;
margin:10px 10px;
display:block;
background:#484848;
transition:.5s;
}
span:nth-child(2) {
top:10px
}
.span1 {
position:absolute;
transform:rotate(-46deg);
margin:15px 10px;
height:2px;
transition:.5s;
}
.span2 {
position:absolute;
transform:rotate(45deg);
margin:5px 10px;
height:2px;
transition:.5s;
}
</style>
</head>
<body>
<div class="wrap">
<span></span>
<span></span>
</div>
<script>
$(".wrap").click(function() {
if (!$("span").eq(0).is('.span1')) {
$("span").eq(0).addClass("span1");
$("span").eq(1).addClass("span2");
} else {
$("span").eq(0).removeClass("span1");
$("span").eq(1).removeClass("span2");
}
});
</script>
</body>
<html>
<head>
<meta charset="utf-8">
<title>面包导航切换动画效果</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
.wrap {
width:48px;
height:30px;
border:1px solid #ccc;
position:relative;
}
span {
height:2px;
position:absolute;
color:#484848;
width:30px;
margin:10px 10px;
display:block;
background:#484848;
transition:.5s;
}
span:nth-child(2) {
top:10px
}
.span1 {
position:absolute;
transform:rotate(-46deg);
margin:15px 10px;
height:2px;
transition:.5s;
}
.span2 {
position:absolute;
transform:rotate(45deg);
margin:5px 10px;
height:2px;
transition:.5s;
}
</style>
</head>
<body>
<div class="wrap">
<span></span>
<span></span>
</div>
<script>
$(".wrap").click(function() {
if (!$("span").eq(0).is('.span1')) {
$("span").eq(0).addClass("span1");
$("span").eq(1).addClass("span2");
} else {
$("span").eq(0).removeClass("span1");
$("span").eq(1).removeClass("span2");
}
});
</script>
</body>
</html>
