<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<style>@charset "utf-8";
/*==================================================
3本線が横方向に回転して×に
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn {
position: relative; /*ボタン内側の基点となるためrelativeを指定*/
background: #ec6015;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 5px;
}
/*ボタン内側*/
.openbtn .openbtn-area {
transition: all 1s; /*アニメーションの設定*/
width: 50px;
height: 50px;
}
.openbtn span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 45%;
}
.openbtn span:nth-of-type(1) {
top: 15px;
}
.openbtn span:nth-of-type(2) {
top: 23px;
}
.openbtn span:nth-of-type(3) {
top: 31px;
}
/*activeクラスが付与されると .openbtn-areaが360度回転し、その中の線が回転して×に*/
.openbtn.active .openbtn-area {
transform: rotate(360deg);
}
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
/*========= レイアウトのためのCSS ===============*/
body {
background: #f3f3f3;
padding: 20px;
}
a {
color: #333;
text-decoration: none;
}
.lead {
margin: 20px 0 0 0;
}
.btn-block {
width: 200px;
padding: 30px;
}</style>
</head>
<body>
<body>
<div class="openbtn">
<div class="openbtn-area">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</div>
<p class="lead">クリックしてね</p>
<script>$(".openbtn").click(function () {
$(this).toggleClass("active");
});
//# sourceURL=pen.js</script>
</body>
</html>