正文
css+jq写的小小的移动端按钮的动画改变（三个很闲变成一个叉号）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!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%; } .test0 {
transform: rotate(45deg) translateY(25px);
} .test2 {
transform: rotate(-45deg) translateY(-25px);
} .test1 {
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) => {
$(item).toggleClass(`test${index}`);
})
})
})</script>
</html>
