Pure CSS hamburger icons transition
How do I make an pure css hamburger icons transition?
Smooth and mesmerizing!. What is a pure css hamburger icons transition? How do you make a pure css hamburger icons transition? This script and codes were developed by Antonija Simic on 28 September 2022, Wednesday.
Pure CSS hamburger icons transition - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS hamburger icons transition</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> <main> <div class="col"> <div class="con"> <div class="bar top"></div> <div class="bar middle"></div> <div class="bar bottom"></div> </div> </div> <div class="col"> <div class="con"> <div class="bar arrow-top"></div> <div class="bar arrow-middle"></div> <div class="bar arrow-bottom"></div> </div> </div> <div class="col"> <div class="con"> <div class="bar arrow-top-r"></div> <div class="bar arrow-middle-r"></div> <div class="bar arrow-bottom-r"></div> </div> </div> <div class="col"> <div class="special-con"> <div class="bar arrow-top-fall"></div> <div class="bar arrow-middle-fall"></div> <div class="bar arrow-bottom-fall"></div> </div> </div>
</main>
<a href="https://codepen.io/tonkec//" class="ua" target="_blank"> <i class="fa fa-user"></i></a>
</body>
</html>
Pure CSS hamburger icons transition - Script Codes CSS Codes
html, body { height: 100%; width: 100%; margin: 0; background: #0B3142; } main { position: relative; top: 50%; } .con, .special-con { cursor: pointer; display: inline-block; } .bar { display: block; height: 5px; width: 50px; background: #6FFFE9; margin: 10px auto; } .con { width: auto; margin: 0 auto; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } .col { display: inline-block; width: 24%; text-align: center; height: auto; position: relative; } .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; } .con:hover .arrow-top { -webkit-transform: rotateZ(45deg) translateY(11px); -moz-transform: rotateZ(45deg) translateY(11px); -ms-transform: rotateZ(45deg) translateY(11px); -o-transform: rotateZ(45deg) translateY(11px); transform: rotateZ(45deg) translateY(11px); width: 25px; } .con:hover .arrow-middle { -webkit-transform: translateX(-25px); -moz-transform: translateX(-25px); -ms-transform: translateX(-25px); -o-transform: translateX(-25px); transform: translateX(-25px); } .con:hover .arrow-bottom { -webkit-transform: rotateZ(-45deg) translateY(-11px); -moz-transform: rotateZ(-45deg) translateY(-11px); -ms-transform: rotateZ(-45deg) translateY(-11px); -o-transform: rotateZ(-45deg) translateY(-11px); transform: rotateZ(-45deg) translateY(-11px); width: 25px; } .con:hover .arrow-top-r { -webkit-transform: rotateZ(-45deg) translateY(11px); -moz-transform: rotateZ(-45deg) translateY(11px); -ms-transform: rotateZ(-45deg) translateY(11px); -o-transform: rotateZ(-45deg) translateY(11px); transform: rotateZ(-45deg) translateY(11px); width: 25px; } .con:hover .arrow-middle-r { -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -ms-transform: translateX(25px); -o-transform: translateX(25px); transform: translateX(25px); } .con:hover .arrow-bottom-r { -webkit-transform: rotateZ(45deg) translateY(-11px); -moz-transform: rotateZ(45deg) translateY(-11px); -ms-transform: rotateZ(45deg) translateY(-11px); -o-transform: rotateZ(45deg) translateY(-11px); transform: rotateZ(45deg) translateY(-11px); width: 25px; } .con:hover .arrow-top-fall { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } .con:hover .arrow-bottom-fall { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } .special-con { margin: 0 auto; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } .special-con:hover .arrow-top-fall { -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } .arrow-bottom-fall, .arrow-top-fall { -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .special-con:hover .arrow-bottom-fall { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .ua { position: absolute; right: 30px; bottom: 20px; color: #6FFFE9; ; 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; } .ua:hover .fa { color: #6FFFE9; ; -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 | 4.5 |
Size | 2,243 Kb |
Views | 58,696 |
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 |
Pure CSS animated hamburger icon | 1,928 Kb |
Fullscreen background slideshow | 2,444 Kb |
Pure css navigation revealed on hover | 2,142 Kb |
A Pen by Antonija Simic | 1,664 Kb |
Sidebar with smooth transition | 2,740 Kb |
3D cube flip | 2,794 Kb |
Simple responsive slides | 3,419 Kb |
Pure CSS side reveal effect | 2,397 Kb |
Menu with CSS3 transition | 2,844 Kb |
Static website for free workshop | 3,412 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 |
A Pen by John Malc | F789gh | 1,420 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
See Through | Larrygeams | 77,410 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Incremental game | Eprouver | 5,868 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
RAQuote | Naderk007 | 4,412 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!