Animated Search Icon

Developer
Kevin Haag
Size
2,092 Kb
Views
12,144
  1. Animated Search Icon Previews
  2. Animated Search Icon HTML Codes
  3. Animated Search Icon CSS Codes
  4. Animated Search Icon JS Codes

How do I make an animated search icon?

An animated icon that transforms from a magnifying glass to an X. What is a animated search icon? How do you make a animated search icon? This script and codes were developed by Kevin Haag on 29 November 2022, Tuesday.

Animated Search Icon Previews
IQ Test

Animated Search Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Search Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="center"> <div class="mag-glass"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Search Icon - Script Codes CSS Codes

/* Just for Pen Layout */
body { width: 100%; height: 100%; background: #4f465a;
}
#center{ width:24px; height:24px; display:block; margin:-12px 0 0 -12px;; position:absolute; top:50%; left:50%;
}
/* Pen Code */
.mag-glass { width: 24px; height: 24px; display: block; position: relative; border-radius: 50%; border: 4px solid #fff;
}
.mag-glass:hover { cursor: pointer;
}
.mag-glass::before,
.mag-glass::after { content: ''; display: block; position: absolute; border-radius: 3px; background: #fff; -webkit-transition: all 0.15s cubic-bezier(1,0,0,1);	-moz-transition: all 0.15s cubic-bezier(1,0,0,1);	transition: all 0.15s cubic-bezier(1,0,0,1);
}
.mag-glass::before { width: 16px; height: 3px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 24px; left: 18px; opacity: 0;
}
.mag-glass.active::before { top: 11px; left: 4px; opacity: 0.5;
}
.mag-glass::after { width: 20px; height: 6px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 24px; left: 18px;
}
.mag-glass.active::after { width: 16px; height: 3px; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); top: 11px; left: 4px; opacity:0.5;
}
.mag-glass.active:hover::before,
.mag-glass.active:hover::after{ opacity:1;
}

Animated Search Icon - Script Codes JS Codes

$(document).ready(function() { $('.mag-glass').click(function() { $(this).toggleClass('active'); return false; });
});
Animated Search Icon - Script Codes
Animated Search Icon - Script Codes
Home Page Home
Developer Kevin Haag
Username khaag
Uploaded November 29, 2022
Rating 3
Size 2,092 Kb
Views 12,144
Do you need developer help for Animated Search Icon?

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!

Kevin Haag (khaag) Script Codes
Name
Scroll Icon
Modal Popup Window
Youtube Layout
A Pen by Kevin Haag
Hostwise Nav Bar
Hamburger Icon Toggle
SVG Fuel Gauge
Vertical Centering
Create amazing love letters 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!