Pure CSS hamburger icons transition

Developer
Antonija Simic
Size
2,243 Kb
Views
58,696
  1. Pure CSS hamburger icons transition Previews
  2. Pure CSS hamburger icons transition HTML Codes
  3. Pure CSS hamburger icons transition CSS Codes

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 Previews
IQ Test

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; }
Pure CSS hamburger icons transition - Script Codes
Pure CSS hamburger icons transition - Script Codes
Home Page Home
Developer Antonija Simic
Username tonkec
Uploaded September 28, 2022
Rating 4.5
Size 2,243 Kb
Views 58,696
Do you need developer help for Pure CSS hamburger icons transition?

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!

Antonija Simic (tonkec) Script Codes
Name
Sidebar with smooth transition
Pure CSS bread-loaf carousel
Flat designed responsive preloader
Pure CSS side reveal effect
3D cube flip
CSS refrigerator
Material design navigation menu
A Pen by Antonija Simic
Fullscreen background slideshow
Responsive sidebar revealed on click and key press
Create amazing captions with AI!

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!