Skip to content

Instantly share code, notes, and snippets.

@tatygrassini

tatygrassini/index.html

Created February 19, 2015 17:14
Show Gist options
  • Save tatygrassini/f8d590034254d2b7e819 to your computer and use it in GitHub Desktop.
Save tatygrassini/f8d590034254d2b7e819 to your computer and use it in GitHub Desktop.
Download ZIP
vERxNv
Raw
index.html
<h1>Hamburgers animés</h1>
<div class="menu-icon menu-icon-cross">
<span></span>
<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<circle fill="transparent" cx="27" cy="27" r="25"></circle>
</svg>
</div>
<div class="menu-icon menu-icon-svg">
<span></span>
<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<path d="M16.500,27.000 C16.500,27.000 24.939,27.000 38.500,27.000 C52.061,27.000 49.945,15.648 46.510,11.367 C41.928,5.656 34.891,2.000 27.000,2.000 C13.193,2.000 2.000,13.193 2.000,27.000 C2.000,40.807 13.193,52.000 27.000,52.000 C40.807,52.000 52.000,40.807 52.000,27.000 C52.000,13.000 40.837,2.000 27.000,2.000 "/>
</svg>
</div>
<div class="menu-icon menu-icon-arrow">
<span></span>
<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<circle fill="transparent" cx="27" cy="27" r="25"></circle>
</svg>
</div>
Raw
script.coffee
jQuery ($) ->
$('.menu-icon').click ->
$this = $(this)
if $this.hasClass('is-opened')
$this.removeClass('is-opened')
$this.addClass('is-closed')
else
$this.removeClass('is-closed')
$this.addClass('is-opened')
Raw
style.css
body, html {
background-color: #15b493;
background: -webkit-linear-gradient(left top, #15b493, #10866d) no-repeat;
background: linear-gradient(left top, #15b493, #10866d) no-repeat;
height: 100%;
color: #FFf;
text-align: center;
font-family: sans-serif; }
.menu-icon {
margin: 25px auto; }
.menu-icon-cross {
position: relative;
width: 54px;
height: 54px;
border-radius: 50%;
cursor: pointer;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.menu-icon-cross span {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
display: block;
width: 22px;
height: 2px;
background-color: #FFF;
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition: -webkit-transform 0.5s, background 0.5s;
transition: transform 0.5s, background 0.5s; }
.menu-icon-cross span::after, .menu-icon-cross span::before {
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
width: 100%;
height: 100%;
background: #FFF;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
-webkit-transition: -webkit-transform 0.5s, background 0.5s;
transition: transform 0.5s, background 0.5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.menu-icon-cross span::before {
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px); }
.menu-icon-cross svg {
z-index: 1;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s; }
.menu-icon-cross circle {
fill: #052b23;
stroke: #FFF;
stroke-width: 1;
stroke-dasharray: 157 157;
stroke-dashoffset: 157;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s; }
.menu-icon-cross.is-opened {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.menu-icon-cross.is-opened span {
background: transparent; }
.menu-icon-cross.is-opened span::before {
-webkit-transform: rotate(-45deg) translateY(0);
-ms-transform: rotate(-45deg) translateY(0);
transform: rotate(-45deg) translateY(0); }
.menu-icon-cross.is-opened span::after {
-webkit-transform: rotate(45deg) translateY(0);
-ms-transform: rotate(45deg) translateY(0);
transform: rotate(45deg) translateY(0); }
.menu-icon-cross.is-opened circle {
stroke-dashoffset: 0; }
.menu-icon-arrow {
position: relative;
width: 54px;
height: 54px;
border-radius: 50%;
cursor: pointer;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.menu-icon-arrow span {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
display: block;
width: 22px;
height: 2px;
background-color: #FFF;
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s; }
.menu-icon-arrow span::after, .menu-icon-arrow span::before {
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
width: 100%;
height: 100%;
background: #FFF;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
-webkit-transition: -webkit-transform 0.5s, width 0.5s, opacity 0.5s;
transition: transform 0.5s, width 0.5s, opacity 0.5s;
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%; }
.menu-icon-arrow span::before {
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px); }
.menu-icon-arrow.is-opened {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.menu-icon-arrow.is-opened span::before {
-webkit-transform: rotate(-45deg) translateY(0);
-ms-transform: rotate(-45deg) translateY(0);
transform: rotate(-45deg) translateY(0);
width: 50%; }
.menu-icon-arrow.is-opened span::after {
-webkit-transform: rotate(45deg) translateY(0);
-ms-transform: rotate(45deg) translateY(0);
transform: rotate(45deg) translateY(0);
width: 50%; }
.menu-icon-arrow.is-opened circle {
stroke-dashoffset: 0; }
.menu-icon-arrow svg {
z-index: 1;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s; }
.menu-icon-arrow circle {
fill: #052b23;
stroke: #FFF;
stroke-width: 1;
stroke-dasharray: 157 157;
stroke-dashoffset: 157;
-webkit-transition: stroke-dashoffset 0.5s 0.2s;
transition: stroke-dashoffset 0.5s 0.2s; }
.menu-icon-svg {
position: relative;
width: 54px;
height: 54px;
border-radius: 50%;
cursor: pointer;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.menu-icon-svg span {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
display: block;
width: 22px;
height: 2px;
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: #FFF;
-webkit-transition: background 0.5s steps(1, end);
transition: background 0.5s steps(1, end); }
.menu-icon-svg span::after, .menu-icon-svg span::before {
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
width: 100%;
height: 100%;
background: #FFF;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
-webkit-transition: -webkit-transform 0.5s, width 0.5s, opacity 0.5s;
transition: transform 0.5s, width 0.5s, opacity 0.5s;
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%; }
.menu-icon-svg span::before {
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px); }
.menu-icon-svg svg {
z-index: 1;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s; }
.menu-icon-svg path {
opacity: 0;
fill: transparent;
stroke: #FFF;
stroke-width: 2;
stroke-dasharray: 22 230; }
.menu-icon-svg.is-opened path {
opacity: 1;
-webkit-animation: pathanimation 0.5s linear;
animation: pathanimation 0.5s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.menu-icon-svg.is-opened span {
background-color: transparent;
-webkit-transition: background 0.5s steps(1, start);
transition: background 0.5s steps(1, start); }
.menu-icon-svg.is-opened span::after {
-webkit-transform: translateX(-3px) translateY(8px) rotate(45deg);
-ms-transform: translateX(-3px) translateY(8px) rotate(45deg);
transform: translateX(-3px) translateY(8px) rotate(45deg); }
.menu-icon-svg.is-opened span::before {
-webkit-transform: translateX(-3px) translateY(-8px) rotate(-45deg);
-ms-transform: translateX(-3px) translateY(-8px) rotate(-45deg);
transform: translateX(-3px) translateY(-8px) rotate(-45deg); }
.menu-icon-svg.is-closed path {
opacity: 1;
-webkit-animation: pathanimation-out 0.5s linear;
animation: pathanimation-out 0.5s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
@-webkit-keyframes pathanimation {
0% {
stroke-dashoffset: 0;
stroke-dasharray: 22 230; }
20% {
stroke-dasharray: 22 230; }
60% {
stroke-dashoffset: -67; }
100% {
stroke-dashoffset: -67;
stroke-dasharray: 230 230; } }
@keyframes pathanimation {
0% {
stroke-dashoffset: 0;
stroke-dasharray: 22 230; }
20% {
stroke-dasharray: 22 230; }
60% {
stroke-dashoffset: -67; }
100% {
stroke-dashoffset: -67;
stroke-dasharray: 230 230; } }
@-webkit-keyframes pathanimation-out {
100% {
stroke-dashoffset: 0;
stroke-dasharray: 22 230; }
80% {
stroke-dasharray: 22 230; }
40% {
stroke-dashoffset: -67; }
0% {
stroke-dashoffset: -67;
stroke-dasharray: 230 230; } }
@keyframes pathanimation-out {
100% {
stroke-dashoffset: 0;
stroke-dasharray: 22 230; }
80% {
stroke-dasharray: 22 230; }
40% {
stroke-dashoffset: -67; }
0% {
stroke-dashoffset: -67;
stroke-dasharray: 230 230; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment