You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
824 B
46 lines
824 B
<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>
|