CSS Animated Sandwich Icon
After seeing Apple Inc. did this, I just want to do the simple version using only CSS.
After seeing Apple Inc. did this, I just want to do the simple version using only CSS.
#sandwich | |
.sw-topper | |
.sw-bottom |
body {background-color: #333;} | |
#sandwich | |
width: 100px | |
height: 100px | |
position: absolute; | |
top:0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
margin: auto; | |
.sw-topper | |
position: relative | |
top: 0 | |
width: 100px; | |
height: 10px; | |
background: rgb(255, 255, 255); | |
border: none; | |
border-radius: 4px 4px 4px 4px; | |
transition: transform 0.5s, top 0.2s; | |
/* transition-delay: 0.2s, 0s; */ | |
.sw-bottom | |
position: relative | |
top: 20px | |
width: 100px | |
height: 10px | |
background: rgb(255, 255, 255); | |
border: none; | |
border-radius: 4px 4px 4px 4px; | |
transition: transform 0.5s, top 0.2s; | |
transition-delay: 0.2s, 0s; | |
#sandwich:hover | |
.sw-topper | |
top: 15px; | |
transform: rotate(140deg); | |
.sw-bottom | |
top: 5px; | |
transform: rotate(-140deg); | |