HTML/CSS - Расширяемая анимация панели поиска
- Последнее обновление: 3 Ноября 2023 г.
- Просмотры: 386
- Автор: Админ
Коллеги всем привет.
В сегодняшней статье мы вам покажем как создать расширенную анимацию панели поиска для вашего сайта.
Требования:
Необходимо подключить библиотеку иконок Fontawesome.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
HTML Код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expandable Searchbar Animation</title>
<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<form action="">
<input type="search" required>
<i class="fa fa-search"></i>
<a href="javascript:void(0)" id="clear-btn">Clear</a>
</form>
</body>
</html>
CSS Код.
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100%;
background: #293042;
}
form{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
input{
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 42.5px;
line-height: 30px;
outline: 0;
border: 0;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
.fa{
box-sizing: border-box;
padding: 10px;
width: 42.5px;
height: 42.5px;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
color: #293042;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}
form:hover,
form:valid{
width: 200px;
cursor: pointer;
}
form:hover input,
form:valid input{
display: block;
}
form:hover .fa,
form:valid .fa{
background: #07051a;
color: white;
}
a {
display: none;
position: absolute;
top: 70px;
bottom:0;
left: 0;
right: 0;
font-size: 20px;
color: white;
text-align: center;
width: 100%;
}
form:valid a {
display: block;
}
JavaScript Код.
const clearInput = () => {
const input = document.getElementsByTagName("input")[0];
input.value = "";
}
const clearBtn = document.getElementById("clear-btn");
clearBtn.addEventListener("click", clearInput);
Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.