HTML/CSS - Розгорнута анімація панелі пошуку

  • Останнє оновлення: 3 Листопада 2023 р.
  • Перегляди: 142
  • Автор: Адмін
HTML/CSS - Розгорнута анімація панелі пошуку

Колеги всім привіт.

У сьогоднішній статті ми вам покажемо, як створити розширену анімацію панелі пошуку для вашого сайту.

 

Вимоги:

Необхідно підключити бібліотеку іконок 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);

 

Дякую всім, я сподіваюся що вам моя стаття хоч чимось допомогла.

 

СХОЖІ СТАТТІ

YII2 defaultRoute - Як змінити контролер за замовчуванням у шаблоні

YII2 defaultRoute - Як змінити контролер за замовчуванням у шаблоні

Панель пошуку на чистому HTML/CSS

Панель пошуку на чистому HTML/CSS

Масштабування зображення на JavaScript - mooZoom

Масштабування зображення на JavaScript - mooZoom