html lang doctype tar st3 blog log wid test
<!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>
来源: http://www.bubuko.com/infodetail-2462556.html