Hamburger and Search CSS Animations
How do I make an hamburger and search css animations?
A quick animation of a hamburger and search icon. What is a hamburger and search css animations? How do you make a hamburger and search css animations? This script and codes were developed by James Nowland on 31 October 2022, Monday.
Hamburger and Search CSS Animations - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hamburger and Search CSS Animations</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <a href="#nav" data-toggle-class="is-active" class="HamburgerIcon u-pullLeft"> <span></span> <span></span> <span></span> <span></span> </a>
<a href="#" class="Logo">prototype</a> <a href="#search" data-toggle-class="is-active" class="SearchIcon u-pullRight" > <span class="SearchIcon-circle"></span> <span class="SearchIcon-handle"></span> </a>
</header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hamburger and Search CSS Animations - Script Codes CSS Codes
.HamburgerIcon { cursor: pointer; display: block; width: 18px; height: 15px; position: relative; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); transition: 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); margin: 4px auto;
}
.HamburgerIcon span { border-radius: 3px; display: block; position: absolute; height: 3px; width: 100%; background: black; opacity: 1; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.12s ease-in-out; transition: 0.12s ease-in-out;
}
.HamburgerIcon span:nth-child(1) { top: 0px;
}
.HamburgerIcon span:nth-child(2) { top: 6px; -webkit-transition: 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.1s; transition: 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.1s;
}
.HamburgerIcon span:nth-child(3) { top: 6px;
}
.HamburgerIcon span:nth-child(4) { top: 12px;
}
.HamburgerIcon.is-active span { background-color: black; -webkit-transition: 0.12s ease-in-out; transition: 0.12s ease-in-out;
}
.HamburgerIcon.is-active span:nth-child(1) { top: 6px; width: 0%; left: 50%;
}
.HamburgerIcon.is-active span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.25s; transition: 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.25s;
}
.HamburgerIcon.is-active span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: 0.3s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.15s; transition: 0.3s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.15s;
}
.HamburgerIcon.is-active span:nth-child(4) { top: 6px; width: 0%; left: 50%;
}
.SearchIcon { border-radius: 3px; display: block; cursor: pointer; height: 13px; width: 13px; padding: 5px; margin-right: 11.5px; top: -1px; position: relative;
}
.SearchIcon.is-active .SearchIcon-circle { -webkit-transform: scale(0.02); transform: scale(0.02); -webkit-transform-origin: 30% 40%; transform-origin: 30% 40%; background: white; border-color: white;
}
.SearchIcon.is-active .SearchIcon-handle:after { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.SearchIcon-circle { position: relative; display: block; height: 13px; width: 13px; background-color: white; border-radius: 100%; z-index: 0; border: 3px solid black; -webkit-transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: 1;
}
.SearchIcon-handle { position: absolute; background-color: black; top: 100%; width: 18px; height: 3px; display: block; -webkit-transform: rotate(45deg); transform: rotate(45deg); float: right; border-radius: 3px; left: 5px; top: 11.5px;
}
.SearchIcon-handle:after { content: ""; background-color: inherit; width: inherit; height: inherit; display: inherit; float: right; border-radius: inherit; -webkit-transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: -1;
}
* { box-sizing: border-box;
}
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */
}
body { padding: 0 5px;
}
header { text-align: center; max-width: 600px; padding: 10px; margin: calc(50vh - 46px) auto 0; border: 3px solid black;
}
header:before, header:after { content: " "; display: table;
}
header:after { clear: both;
}
.Logo { color: black; text-decoration: none; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5em; line-height: 26px; display: inline-block;
}
.u-pullLeft { float: left;
}
.u-pullRight { float: right;
}
Hamburger and Search CSS Animations - Script Codes JS Codes
$('*[data-toggle-class]').click(function(e){ e.preventDefault(); var target = $(this).data("toggleClassTarget"), classToToggle = $(this).data("toggleClass"); if (target) { $(target).toggleClass( classToToggle ); } else { $(this).toggleClass( classToToggle ); } });
Developer | James Nowland |
Username | jnowland |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 4,173 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Lorem pixel Images | 2,290 Kb |
Pure CSS Spinner | 3,909 Kb |
Animating Scale with text featuring blurry raster DPI issues | 2,983 Kb |
Letting.js Demo using vanilla js. | 2,298 Kb |
Dribble Button CSS Rebound | 7,557 Kb |
CSS3 Stroke and Gradient Text | 2,577 Kb |
CSS Ribbon with inner border. | 166,994 Kb |
Three Heading Solutions | 11,415 Kb |
Login Form CSS only validation | 5,739 Kb |
Download Rebound | 10,865 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Chuck Norris Background | Manz | 1,967 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Tail rose iris lined | Kbrtrm | 1,846 Kb |
Fading text with CSS blend modes | Giana | 3,305 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!