Pure CSS animated hamburger icon
How do I make an pure css animated hamburger icon?
Pure CSS animated hamburger icon. What is a pure css animated hamburger icon? How do you make a pure css animated hamburger icon? This script and codes were developed by Antonija Simic on 28 September 2022, Wednesday.
Pure CSS animated hamburger icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS animated hamburger icon</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="con"> <div class="bar top"></div> <div class="bar middle"></div> <div class="bar bottom"></div>
</div>
<a href="https://codepen.io/tonkec" class="ua" target="_blank">
<i class="fa fa-user"></i></a>
</body>
</html>
Pure CSS animated hamburger icon - Script Codes CSS Codes
html, body { height: 99%; width: 100%; margin: 0; background: #073B4C; padding: 0; } .con { width: 100px; display: block; margin: 0 auto; top: 50%; position: relative; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .con:hover { cursor: pointer; } .bar { display: block; height: 5px; width: 50px; background: #EF476F; margin: 10px auto; } .middle { margin: 0 auto; } .bar { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } .con:hover .top { -webkit-transform: translateY(15px) rotateZ(45deg); -moz-transform: translateY(15px) rotateZ(45deg); -ms-transform: translateY(15px) rotateZ(45deg); -o-transform: translateY(15px) rotateZ(45deg); transform: translateY(15px) rotateZ(45deg); } .con:hover .bottom { -webkit-transform: translateY(-15px) rotateZ(-45deg); -moz-transform: translateY(-15px) rotateZ(-45deg); -ms-transform: translateY(-15px) rotateZ(-45deg); -o-transform: translateY(-15px) rotateZ(-45deg); transform: translateY(-15px) rotateZ(-45deg); } .con:hover .middle { width: 0; }
.ua { position: absolute; right: 20px; bottom: 20px; color: #fff; font-size: 2em;
}
.fa { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; color: #EF476F;
}
.ua:hover .fa { color: #EF476F; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
}
Developer | Antonija Simic |
Username | tonkec |
Uploaded | September 28, 2022 |
Rating | 3 |
Size | 1,928 Kb |
Views | 32,384 |
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 |
Static website for free workshop | 3,412 Kb |
Simple slides with moving bg | 3,576 Kb |
Simple responsive slides | 3,419 Kb |
Material design navigation menu | 3,012 Kb |
A Pen by Antonija Simic | 1,664 Kb |
Pure CSS hamburger icons transition | 2,243 Kb |
CSS refrigerator | 5,764 Kb |
Menu with CSS3 transition | 2,844 Kb |
Pure CSS side reveal effect | 2,397 Kb |
3D cube flip | 2,794 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 |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
Navcube | Wbarlow | 4,775 Kb |
Midterm dry run | Jds317 | 1,649 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!