Html, Css, JavaScript, Animation Tutorial (Search Box)

Показать описание

Search box animation tutorial with html, css and, javascript

#programming #coding #programmer #developer #python #code #technology #coder #javascript #java #computerscience #tech #software #html #webdeveloper #webdevelopment #linux #css #codinglife #webdesign #hacking #php #development #softwaredeveloper #programmers #programmingmemes #programminglife #softwareengineer #cybersecurity #bhfyp #html #css #javascript

Рекомендации по теме

Комментарии

Hare i share sorce code
Hope Guys you like this ❤️

Javascript file :

var searchBox = input[type="text"] + span');

searchBox.forEach((elm) => {
elm.addEventListener('click', () => {
= '';
});
});

Html File :

<div class="search-box">
<input type="text" placeholder=" " /><span></span>
</div>

CSS File :

body{
margin: 0;
padding: 0;
background: #262626;
font-family: sans-serif;
}
a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 75px;
background: #fff;
border-radius: 75px;
line-height: 75px;
text-align: center;
font-size: 30px;
text-decoration: none;
color: #262626;
transition: .5s;
text-transform: uppercase;
}
a.active{
background: transparent;
color: #fff;
}
a:before{
content: "";
position: absolute;
top: 0;
left: 0;
background: #ff0047;
width: 50%;
height: 100%;
transition: .5s;
z-index: -1;
transform: translateX(-200px) rotate(-325deg);
opacity: 0;
}
a.active:before{
left: 30.5px;
transform: translateX(0px) rotate(35deg);
border-top-left-radius: 75px;
border-bottom-left-radius: 75px;
opacity: 1;
}
a:after{
content: "";
position: absolute;
top: 0;
right: 0;
background: #ff0047;
width: 50%;
height: 100%;
transition: .5s;
z-index: -1;
transform: translateX(200px) rotate(325deg);
opacity: 0;
}
a.active:after{
right: 30.5px;
transform: translateX(0px) rotate(-35deg);
border-top-right-radius: 75px;
border-bottom-right-radius: 75px;
opacity: 1;
}

Best of luck ❤️❤️

jaypanchal

today i'm create too video, thank you for information

front-endanimal

Can you share the code in the description?

twentyonedot

Please share thd code I will be so glad for you🙏🙏🙏🙏🙏

ebnay

Html, Css, JavaScript, Animation Tutorial (Search Box)

CSS Animation in 100 Seconds

Learn CSS Animations In 20 Minutes - For Beginners

Toggle Button Without HTML, CSS Or Javascript (Full Tutorial in Description)

Make Awesome SVG Animations with CSS // 7 Useful Techniques

Learn CSS Animation In 15 Minutes

Award Winning Animation With Only 20 Lines Of CSS?

Reverse Engineer CSS Animations #Shorts

Pikachu | HTML CSS JavaScript

3D Flip Card Animation with Sparkling Particle Effects in HTML, CSS, and JavaScript #shorts#short

Solar System | HTML CSS

Circle Animation | HTML CSS

Particle Connect Animation | HTML CSS JavaScript

The BEST Way To Make CSS Animations?! 🤩

SVG Animations Idea | 7 SVG Animations You Must See! | Html Css Javascript Effects & Animations

Sprite sheet animation tutorial with HTML and CSS

Learn CSS Border Animations in 6 Minutes

Build a Responsive Sidebar Menu with Animated Dropdowns | HTML CSS JavaScript Project

Learn CSS Animations in 9 Minutes

Animation On Scroll | HTML CSS & Javascript

html and css 3d disigning #shorts#html codewithharry#pytho

Multiple Typing Text Animation in HTML CSS & JavaScript

Easy Hand-Drawn SVG Animation #Shorts

JavaScript Scroll Animation Tutorial | Web Animations API + ScrollTimeline

Login Form | HTML CSS