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