Здравствуйте разработчики, Сегодня мы создадим удивительную анимированную панель поиска с иконкой с помощью HTML и CSS. Для его создания вам понадобится Font awesome kit. Надеюсь, вам понравится этот пост.
Строка поиска — это очень важный компонент нашего сайта. Она позволяет пользователям легко искать статьи, доступные на вашем блоге, и помогает им легко найти то, что они ищут, что повышает удобство сайта для пользователей.
Расширение поисковой строки до Hover — это идея, которую используют современные сайты, размещая ее в верхней навигационной панели сайта, чтобы ее было легко увидеть. Даже если это небольшая функция, которую нужно реализовать, вы можете подойти к ней творчески и сделать строку поиска интерактивной таким образом, чтобы добавить хороший опыт для пользователей.
Демо-версия
Теперь, когда мы увидели демонстрационный пример, давайте приступим к его созданию с помощью CSS и HTML. Для создания анимированной строки поиска мы использовали Font Awesome. Следовательно, вам понадобится ссылка Font Awesome в теге
тег. Это очень просто, все, что вам нужно сделать, это зайти на сайт Font Awesome, и они предоставят вам код набора.
Awesome Анимированная строка поиска с иконкой HTML CSS (исходный код)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated Search Bar</title>
<link rel="icon" href="animated.jpg">
<link rel="stylesheet" href="SearchBar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
</head>
<body>
<br>
<form action="" id="s">
<input type="search">
<i class="fa fa-search"></i>
</form>
</body>
</html>
Код CSS
body{
padding: 0;
margin: 0;
height: 100vh;
width: 100%;
background: #07051a;
}
form{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all 1s;a
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
input{
position: absolute;
width: 100%;
height: 42.5px;
line-height: 30px;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
top: 0;
left: 0;
outline: 0;
border: 0;
}
.fa{
box-sizing: border-box;
padding: 10px;
width: 42.5px;
height: 42.5px;
position: absolute;
border-radius: 50%;
color: #07051a;
text-align: center;
font-size: 1.2em;
transition: all 1s;
top: 0;
right: 0;
}
form:hover {
width: 200px;
cursor: pointer;
}
form:hover input {
display: block;
}
form:hover .fa {
background: #07051a;
color: white;
}
Поздравляем! Вы успешно создали анимированную панель поиска с иконкой.
Обязательно ознакомьтесь с другими моими замечательными уроками по CSS и Javascript:
- Отзывчивый дизайн нижнего колонтитула в HTML и CSS
- Приложение «Генератор случайных паролей» на Javascript Исходный код
- Стекломорфная форма входа в систему с помощью HTML и CSS
Мой сайт: codewithayan, смотрите здесь, чтобы ознакомиться со всеми моими замечательными уроками.