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 |
Step 3 | 3,874 Kb |
A Pen by James Nowland | 6,998 Kb |
Smart Ratio CSS Photo Grid | 3,200 Kb |
Pure CSS Spinner | 3,909 Kb |
SVG Modified with Query String | 1,663 Kb |
Ad Folding without regions | 3,938 Kb |
CSS3 Stroke and Gradient Text | 2,577 Kb |
Lorem pixel Images | 2,290 Kb |
Outer Gradient Circle Progress | 17,247 Kb |
Responsive Typography for dummies. | 6,869 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 |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Shopping cart | Andiio | 6,581 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Portfolio page | Bhavya_j | 2,804 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!