forked from uiverse-io/galaxy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathJulanDeAlb_tall-swan-6.html
49 lines (42 loc) · 1.22 KB
/
JulanDeAlb_tall-swan-6.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<label class="hamburger">
<input type="checkbox">
<svg viewBox="0 0 32 32">
<path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path>
<path class="line" d="M7 16 27 16"></path>
</svg>
</label>
<style>
/* From Uiverse.io by JulanDeAlb - Tags: checkbox, hamburger, toggle, menu, animated */
.hamburger {
cursor: pointer;
}
.hamburger input {
display: none;
}
.hamburger svg {
/* The size of the SVG defines the overall size */
height: 3em;
/* Define the transition for transforming the SVG */
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line {
fill: none;
stroke: white;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 3;
/* Define the transition for transforming the Stroke */
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line-top-bottom {
stroke-dasharray: 12 63;
}
.hamburger input:checked + svg {
transform: rotate(-45deg);
}
.hamburger input:checked + svg .line-top-bottom {
stroke-dasharray: 20 300;
stroke-dashoffset: -32.42;
}
</style>