Потрясающая анимированная строка поиска с иконкой в HTML и CSS

Здравствуйте разработчики, Сегодня мы создадим удивительную анимированную панель поиска с иконкой с помощью 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, смотрите здесь, чтобы ознакомиться со всеми моими замечательными уроками.