mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
57 lines
1.1 KiB
HTML
57 lines
1.1 KiB
HTML
<div class="container">
|
|
<input class="label-check" id="label-check" type="checkbox">
|
|
<label for="label-check" class="hamburger-label">
|
|
<div class="line1"></div>
|
|
<div class="line2"></div>
|
|
<div class="line3"></div>
|
|
<label></label></label></div>
|
|
<style>
|
|
/* From Uiverse.io by JkHuger - Tags: switch */
|
|
.label-check {
|
|
display: none;
|
|
}
|
|
|
|
.hamburger-label {
|
|
width: 70px;
|
|
height: 58px;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hamburger-label div {
|
|
width: 70px;
|
|
height: 6px;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
}
|
|
|
|
.line1 {
|
|
transition: all .3s;
|
|
}
|
|
|
|
.line2 {
|
|
margin: 18px 0 0 0;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.line3 {
|
|
margin: 36px 0 0 0;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#label-check:checked + .hamburger-label .line1 {
|
|
transform: rotate(35deg) scaleX(.55) translate(39px, -4.5px);
|
|
border-radius: 50px 50px 50px 0;
|
|
}
|
|
|
|
#label-check:checked + .hamburger-label .line3 {
|
|
transform: rotate(-35deg) scaleX(.55) translate(39px, 4.5px);
|
|
border-radius: 0 50px 50px 50px;
|
|
}
|
|
|
|
#label-check:checked + .hamburger-label .line2 {
|
|
border-top-right-radius: 50px;
|
|
border-bottom-right-radius: 50px;
|
|
width: 45px;
|
|
}
|
|
</style>
|