「ハンバーガー」アイコンをクリックしたら「バツ」アイコンにアニメーションする CSS
ハンバーガーアイコンをクリックしたらバツアイコンにアニメーションする CSS。JavaScriptを使わずにCSSだけで実現しています。
Source Code
右上の「コピー」からご利用ください。
コピー
<input id="my-parts-checkbox" class="my-parts-hidden" type="checkbox">
<label id="my-parts-icon" for="my-parts-checkbox"><span></span></label>コピー
.my-parts-hidden {
display: none;
}
#my-parts-icon {
cursor: pointer;
display: inline-block;
height: 50px;
position: relative;
width: 50px;
}
#my-parts-icon span {
background: #333;
border-radius: 4px;
display: block;
height: 16%;
left: 50%;
margin: -8% 0 0 -42%;
position: absolute;
top: 50%;
transition: all 0.3s ease-in-out;
width: 84%;
}
#my-parts-icon span::before,
#my-parts-icon span::after {
-webkit-transform: rotate(0);
background: #333;
border-radius: 4px;
content: "";
display: block;
height: 100%;
left: 50%;
margin: -8% 0 0 -50%;
position: absolute;
top: 50%;
transform: rotate(0);
transition: all 0.3s ease-in-out;
width: 100%;
}
#my-parts-icon span::before {
margin-top: -38%;
}
#my-parts-icon span::after {
margin-top: 19%;
}
#my-parts-checkbox:checked ~ #my-parts-icon span {
background: rgba(51, 51, 51, 0);
}
#my-parts-checkbox:checked ~ #my-parts-icon span::before,
#my-parts-checkbox:checked ~ #my-parts-icon span::after {
content: "";
display: block;
height: 100%;
left: 50%;
margin: -8% 0 0 -42%;
position: absolute;
top: 50%;
width: 100%;
}
#my-parts-checkbox:checked ~ #my-parts-icon span::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#my-parts-checkbox:checked ~ #my-parts-icon span::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
