parent
171601743f
commit
0adddd5541
@ -1,45 +0,0 @@
|
|||||||
<script>
|
|
||||||
function myFunction(x) {
|
|
||||||
document.querySelector("#icon").classList.toggle("change");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="container" id="icon" on:click={() => myFunction(this)}>
|
|
||||||
<div class="bar1" />
|
|
||||||
<div class="bar2" />
|
|
||||||
<div class="bar3" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar1,
|
|
||||||
.bar2,
|
|
||||||
.bar3 {
|
|
||||||
width: 35px;
|
|
||||||
height: 5px;
|
|
||||||
background-color: #333;
|
|
||||||
margin: 6px 0;
|
|
||||||
transition: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Rotate first bar */
|
|
||||||
.change .bar1 {
|
|
||||||
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
|
|
||||||
transform: rotate(-45deg) translate(-9px, 6px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fade out the second bar */
|
|
||||||
.change .bar2 {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Rotate last bar */
|
|
||||||
.change .bar3 {
|
|
||||||
-webkit-transform: rotate(45deg) translate(-8px, -8px);
|
|
||||||
transform: rotate(45deg) translate(-8px, -8px);
|
|
||||||
}
|
|
||||||
</style>
|
|
Loading…
Reference in new issue