<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
</head>
<style type="text/css">
.test {
margin: 500px auto;
text-align: center;
width: 100px;
height: 100px;
}
.test button {
height: 100px;
background: none;
outline: none;
cursor: pointer;
border: none;
}
.test span {
width: 100px;
height: 10px;
background: red;
position: relative;
display: block;
border-radius: 10px;
transition: background .3s .2s ;
/*激活之后 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/
}
.test span:before {
content: "";
display: block;
top: -30px;
left: 0;
width: 100px;
height: 10px;
background: red;
position: absolute;
border-radius: 10px;
transition: top .3s .2s ease, -webkit-transform .3s ease;
}
.test span:after {
content: "";
background: red;
display: block;
width: 100px;
height: 10px;
top: 30px;
position: absolute;
left: 0;
border-radius: 10px;
transition: top .3s .2s ease, -webkit-transform .3s ease;
}
.test button.active span {
background: transparent;
border-radius: 10px;
-webkit-transform-origin: 50% 50%;
transition: background .2s .1s ease;
/*激活之前 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/
}
.test button.active span:before {
transform: rotate(45deg);
top: 0;
transition: top .3s ease, -webkit-transform .3s .2s ease;
}
.test button.active span:after {
transform: rotate(-45deg);
top: 0;
transition: top .3s ease, -webkit-transform .3s .2s ease;
}
</style>
<body>
<div class="test">
<button>
<span></span>
</button>
</div>
</body>
</html>
<script type="text/javascript">
//自定义开关
var _a = true;
$("button").click(function(){
if(_a == true){
$(this).addClass("active");
_a= false;
}else{
$(this).removeClass("active");
_a= true;
}
})
</script>