Skip to content

Instantly share code, notes, and snippets.

@jhorman9

jhorman9/hamburger-icons-animations.markdown

Created October 29, 2023 15:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jhorman9/cd9e3d28c096661e9f060639d9326002 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jhorman9/cd9e3d28c096661e9f060639d9326002 to your computer and use it in GitHub Desktop.
Download ZIP
Hamburger Icons Animations
Raw
hamburger-icons-animations.markdown
Raw
index.html
<div class='wrapper'>
<h1>Hamburger Icons Animations</h1>
<div class="icon nav-icon-1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="icon nav-icon-2">
<span></span>
<span></span>
<span></span>
</div>
<div class="icon nav-icon-3">
<span></span>
<span></span>
<span></span>
</div>
<div class="icon nav-icon-4">
<span></span>
<span></span>
<span></span>
</div>
<div class="icon nav-icon-5">
<span></span>
<span></span>
<span></span>
</div>
<div class="icon nav-icon-6">
<span></span>
<span></span>
<span></span>
</div>
<div class="icon nav-icon-7">
<span></span>
<span></span>
<span></span>
</div>
<div class="icon nav-icon-8">
<span></span>
<span></span>
<span></span>
</div>
</div>
<footer>
<p>
Created with <i class="fa fa-heart"></i> by
<a target="_blank" href="https://codepen.io/ahmadbassamemran/">Ahmad Emran</a>
Follow me :
<a target="_blank" href="https://www.instagram.com/ahmadbassamemran/"><i class="fab fa-instagram"></i></a>
<a target="_blank" href="https://www.linkedin.com/in/ahmademarn/"><i class="fab fa-linkedin"></i></a>
<a target="_blank" href="https://codepen.io/ahmadbassamemran/"><i class="fab fa-codepen"></i></a>
<a target="_blank" href="https://dev.to/ahmadbassamemran"><i class="fab fa-dev"></i></a>
<a target="_blank" href="https://twitter.com/ahmadbassamemra"><i class="fab fa-twitter-square"></i></a>
</p>
</footer>
<div class="youtubeBtn">
<a target="_blank" href="https://www.youtube.com/AhmadEmran?sub_confirmation=1">
<span>Watch on YouTube</span>
<i class="fab fa-youtube"></i>
</a>
</div>
Raw
script.js
const icons = document.querySelectorAll('.icon');
icons.forEach (icon => {
icon.addEventListener('click', (event) => {
icon.classList.toggle("open");
});
});
Raw
style.css
body{
padding: 0;
margin: 0;
background:#3F51B5;
background-image: linear-gradient(#7E57C2 50%, #3F51B5);
text-align: center;
background-size: 100% 100%;
background-repeat: no-repeat;
height:100vh;
}
h1{
color:#fff;
font-family: 'Lato';
font-weight:100;
padding:30px;
display:block;
}
.wrapper{
position:absolute;
top:20%;
left:50%;
transform:translate(-50%, -20%);
}
.wrapper .icon{
margin:20px;
}
/* nav-icon-1 */
.nav-icon-1{
width: 30px;
height: 30px;
position: relative;
transition: .1s;
margin: 10px 10px;
cursor: pointer;
display: inline-block;
}
.nav-icon-1 span{
width: 5px;
height: 5px;
background-color: #fff;
display: block;
border-radius: 50%;
position: absolute;
}
.nav-icon-1:hover span{
transform: scale(1.2);
transition: 350ms cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-1 span:nth-child(1){
left: 0;
top: 0;
}
.nav-icon-1 span:nth-child(2){
left: 12px;
top: 0;
}
.nav-icon-1 span:nth-child(3){
right: 0;
top: 0;
}
.nav-icon-1 span:nth-child(4){
left: 0;
top: 12px;
}
.nav-icon-1 span:nth-child(5){
position: absolute;
left: 12px;
top: 12px;
}
.nav-icon-1 span:nth-child(6){
right: 0px;
top: 12px;
}
.nav-icon-1 span:nth-child(7){
left: 0px;
bottom: 0px;
}
.nav-icon-1 span:nth-child(8){
position: absolute;
left: 12px;
bottom: 0px;
}
.nav-icon-1 span:nth-child(9){
right: 0px;
bottom: 0px;
}
.nav-icon-1.open{
transform: rotate(180deg);
cursor: pointer;
transition: .2s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-1.open span{
border-radius: 50%;
transition-delay: 200ms;
transition: .5s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-1.open span:nth-child(2) {
left: 6px;
top: 6px;
}
.nav-icon-1.open span:nth-child(4) {
left: 6px;
top: 18px;
}
.nav-icon-1.open span:nth-child(6) {
right: 6px;
top: 6px;
}
.nav-icon-1.open span:nth-child(8) {
left: 18px;
bottom: 6px;
}
/* nav-icon-2 */
.nav-icon-2{
width: 35px;
height: 30px;
margin: 10px 10px;
position: relative;
cursor: pointer;
display: inline-block;
}
.nav-icon-2 span{
background-color:#FFF;
position: absolute;
border-radius: 2px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-2 span:nth-child(1){
width: 100%;
height: 4px;
display: block;
top: 0px;
left: 0px;
}
.nav-icon-2 span:nth-child(2){
width: 100%;
height: 4px;
display: block;
top: 13px;
left: 0px;
}
.nav-icon-2 span:nth-child(3){
width: 100%;
height: 4px;
display: block;
bottom: 0px;
left: 0px;
}
.nav-icon-2:not(.open):hover span:nth-child(1){
width: 100%;
height: 4px;
display: block;
top: -2px;
left: 0px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-2:not(.open):hover span:nth-child(2){
width: 100%;
height: 4px;
display: block;
top: 13px;
left: 0px;
transition: .4s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-2:not(.open):hover span:nth-child(3){
width: 100%;
height: 4px;
display: block;
bottom: -2px;
left: 0px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-2.open span:nth-child(1){
left:3px;
top: 12px;
width: 30px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
transform: rotate(90deg);
transition-delay: 150ms;
}
.nav-icon-2.open span:nth-child(2){
left:2px;
top: 20px;
width: 20px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
transform: rotate(45deg);
transition-delay: 50ms;
}
.nav-icon-2.open span:nth-child(3){
left:14px;
top: 20px;
width: 20px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
transform: rotate(-45deg);
transition-delay: 100ms;
}
/* nav-icon-3 */
.nav-icon-3{
width: 35px;
height: 30px;
margin: 10px 10px;
position: relative;
cursor: pointer;
display: inline-block;
}
.nav-icon-3 span{
background-color:#FFF;
position: absolute;
border-radius: 2px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-3 span:nth-child(1){
width: 100%;
height: 4px;
display: block;
top: 0px;
left: 0px;
}
.nav-icon-3 span:nth-child(2){
width: 100%;
height: 4px;
display: block;
top: 13px;
left: 0px;
}
.nav-icon-3 span:nth-child(3){
width: 100%;
height: 4px;
display: block;
bottom: 0px;
left: 0px;
}
.nav-icon-3:not(.open):hover span:nth-child(1){
width: 100%;
height: 4px;
display: block;
top: -2px;
left: 0px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-3:not(.open):hover span:nth-child(2){
width: 100%;
height: 4px;
display: block;
top: 13px;
left: 0px;
transition: .4s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-3:not(.open):hover span:nth-child(3){
width: 100%;
height: 4px;
display: block;
bottom: -2px;
left: 0px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-3.open {
transform: rotate(-90deg);
}
.nav-icon-3.open span:nth-child(1){
left:3px;
top: 12px;
width: 30px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
transform: rotate(90deg);
transition-delay: 150ms;
}
.nav-icon-3.open span:nth-child(2){
left:2px;
top: 20px;
width: 20px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
transform: rotate(45deg);
transition-delay: 50ms;
}
.nav-icon-3.open span:nth-child(3){
left:14px;
top: 20px;
width: 20px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
transform: rotate(-45deg);
transition-delay: 100ms;
}
/* nav-icon-4 */
.nav-icon-4{
width: 35px;
height: 30px;
margin: 10px 10px;
position: relative;
cursor: pointer;
display: inline-block;
}
.nav-icon-4 span{
background-color:#FFF;
position: absolute;
border-radius: 2px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-4 span:nth-child(1){
width: 100%;
height: 4px;
display: block;
top: 0px;
left: 0px;
}
.nav-icon-4 span:nth-child(2){
width: 100%;
height: 4px;
display: block;
top: 13px;
left: 0px;
}
.nav-icon-4 span:nth-child(3){
width: 100%;
height: 4px;
display: block;
bottom: 0px;
left: 0px;
}
.nav-icon-4:not(.open):hover span:nth-child(1){
width: 100%;
height: 4px;
display: block;
top: -2px;
left: 0px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-4:not(.open):hover span:nth-child(2){
width: 100%;
height: 4px;
display: block;
top: 13px;
left: 0px;
transition: .4s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-4:not(.open):hover span:nth-child(3){
width: 100%;
height: 4px;
display: block;
bottom: -2px;
left: 0px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-4.open {
transform: rotate(90deg);
}
.nav-icon-4.open span:nth-child(1){
left:3px;
top: 12px;
width: 30px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
transform: rotate(90deg);
transition-delay: 150ms;
}
.nav-icon-4.open span:nth-child(2){
left:2px;
top: 20px;
width: 20px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
transform: rotate(45deg);
transition-delay: 50ms;
}
.nav-icon-4.open span:nth-child(3){
left:14px;
top: 20px;
width: 20px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
transform: rotate(-45deg);
transition-delay: 100ms;
}
/* nav-icon-5 */
.nav-icon-5{
width: 35px;
height: 30px;
margin: 10px 10px;
position: relative;
cursor: pointer;
display: inline-block;
}
.nav-icon-5 span{
background-color:#fff;
position: absolute;
border-radius: 2px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
width:100%;
height: 4px;
transition-duration: 500ms
}
.nav-icon-5 span:nth-child(1){
top:0px;
left: 0px;
}
.nav-icon-5 span:nth-child(2){
top:13px;
left: 0px;
opacity:1;
}
.nav-icon-5 span:nth-child(3){
bottom:0px;
left: 0px;
}
.nav-icon-5:not(.open):hover span:nth-child(1){
transform: rotate(-3deg) scaleY(1.1);
}
.nav-icon-5:not(.open):hover span:nth-child(2){
transform: rotate(3deg) scaleY(1.1);
}
.nav-icon-5:not(.open):hover span:nth-child(3){
transform: rotate(-4deg) scaleY(1.1);
}
.nav-icon-5.open span:nth-child(1){
transform: rotate(45deg);
top: 13px;
}
.nav-icon-5.open span:nth-child(2){
opacity:0;
}
.nav-icon-5.open span:nth-child(3){
transform: rotate(-45deg);
top: 13px;
}
/* nav-icon-6 */
.nav-icon-6{
width: 35px;
height: 30px;
margin: 10px 10px;
position: relative;
cursor: pointer;
display: inline-block;
}
.nav-icon-6 span{
background-color:#fff;
position: absolute;
border-radius: 2px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
width:100%;
height: 4px;
}
.nav-icon-6 span:nth-child(1){
top:0px;
left: 0px;
}
.nav-icon-6 span:nth-child(2){
top:13px;
left: 0px;
}
.nav-icon-6 span:nth-child(3){
bottom:0px;
left: 0px;
}
.nav-icon-6:not(.open):hover span:nth-child(1){
transform: scaleY(1.2);
left: -5px;
}
.nav-icon-6:not(.open):hover span:nth-child(2){
transform: rotate(5deg) scaleY(1.1);
}
.nav-icon-6:not(.open):hover span:nth-child(3){
transform: scaleY(1.2);
left: 5px;
}
.nav-icon-6.open span:nth-child(1){
transform: rotate(45deg) scaleX(0.7);
top: 13PX;
left: -8px;
}
.nav-icon-6.open span:nth-child(2){
transform: scale(0);
transition-duration: 50ms
}
.nav-icon-6.open span:nth-child(3){
transform: rotate(-45deg) scaleX(0.7);
top: 13PX;
left: 7px;
}
/* nav-icon-7 */
.nav-icon-7{
width: 35px;
height: 30px;
margin: 10px 10px;
position: relative;
cursor: pointer;
display: inline-block;
}
.nav-icon-7 span{
background-color:#FFF;
position: absolute;
border-radius: 2px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
width:100%;
height: 4px;
}
.nav-icon-7 span:nth-child(1){
top:0px;
left: 0px;
}
.nav-icon-7 span:nth-child(2){
top:13px;
left: 0px;
}
.nav-icon-7 span:nth-child(3){
bottom:0px;
left: 0px;
}
.nav-icon-7:not(.open):hover span:nth-child(1){
transform: scaleX(.8);
}
.nav-icon-7:not(.open):hover span:nth-child(2){
transform: scaleX(.5);
}
.nav-icon-7:not(.open):hover span:nth-child(3){
transform: scaleX(.8);
}
.nav-icon-7.open span:nth-child(1){
transform: rotate(90deg);
top: 13PX;
}
.nav-icon-7.open span:nth-child(2){
transform: scale(0);
transition-duration: 50ms
}
.nav-icon-7.open span:nth-child(3){
top: 13PX;
}
/* nav-icon-8 */
.nav-icon-8{
width: 35px;
height: 30px;
margin: 10px 10px;
position: relative;
cursor: pointer;
display: inline-block;
}
.nav-icon-8 span{
background-color:#FFF;
position: absolute;
border-radius: 2px;
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
width:100%;
height: 4px;
}
.nav-icon-8 span:nth-child(1){
top:0px;
left: 0px;
}
.nav-icon-8 span:nth-child(2){
top:13px;
left: 0px;
}
.nav-icon-8 span:nth-child(3){
bottom:0px;
left: 0px;
}
.nav-icon-8:not(.open):hover span:nth-child(1){
transform: scaleX(.8);
}
.nav-icon-8:not(.open):hover span:nth-child(2){
transform: scaleX(.5);
}
.nav-icon-8:not(.open):hover span:nth-child(3){
transform: scaleX(.8);
}
.nav-icon-8.open span:nth-child(1){
top: 13px;
}
.nav-icon-8.open span:nth-child(2){
top:13px;
}
.nav-icon-8.open span:nth-child(3){
top: 13px;
}
/* footer */
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer .fa-heart{
color: red;
}
footer .fa-dev{
color: #fff;
}
footer .fa-twitter-square{
color:#1da0f1;
}
footer .fa-instagram{
color: #f0007c;
}
fotter .fa-linkedin{
color:#0073b1;
}
footer .fa-codepen{
color:#fff
}
footer a {
color: #3c97bf;
text-decoration: none;
margin-right:5px;
}
.youtubeBtn{
position: fixed;
left: 50%;
transform:translatex(-50%);
bottom: 45px;
cursor: pointer;
transition: all .3s;
vertical-align: middle;
text-align: center;
display: inline-block;
}
.youtubeBtn i{
font-size:20px;
float:left;
}
.youtubeBtn a{
color:#ff0000;
animation: youtubeAnim 1000ms linear infinite;
float:right;
}
.youtubeBtn a:hover{
color:#c9110f;
transition:all .3s ease-in-out;
}
.youtubeBtn i:active{
transform:scale(.9);
transition:all .3s ease-in-out;
}
.youtubeBtn span{
font-family: 'Lato';
font-weight: bold;
color: #fff;
display: block;
font-size: 12px;
float: right;
line-height: 20px;
padding-left: 5px;
}
@keyframes youtubeAnim{
0%,100%{
color:#c9110f;
}
50%{
color:#ff0000;
}
}
/* footer */
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment