<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航图标的改变</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
margin: 100px auto;
transform-origin:50% 50%;
}
span {
display: inline-block;
width: 100%;
height: 1px;
border-bottom: 1px solid lightgray;
transition: all .6s;
transform-origin:50% 50%;
}
.test1 {
transform: rotate(45deg) translateY(25px);
}
.test2 {
transform: rotate(-45deg) translateY(-25px);
}
.test3 {
opacity: 0;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
<script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
<script>
$(() => {
$("div").on("click", (e) => {
$(e.target).find("span").map((index, item) => {
switch (index) {
case 0:
$(item).toggleClass("test1");
break;
case 1:
$(item).toggleClass("test3");
break;
case 2:
$(item).toggleClass("test2");
break;
}
})
})
})
</script>
</html>
