HTML 및 CSS를 사용한 놀라운 애니메이션 검색 표시줄

3441 단어
안녕하세요 여러분, 오늘 이 게시물에서는 amazing animated search bar with icon using CSS and HTML을 추가하는 방법을 배웁니다. 이를 만들기 위해 간단한 CSS 및 Font Awesome을 사용할 것입니다. 이 게시물을 즐기시기 바랍니다.

검색 표시줄은 당사 웹사이트의 매우 중요한 구성 요소입니다. 사용자가 블로그에서 사용할 수 있는 기사를 쉽게 검색하고 원하는 내용을 쉽게 찾을 수 있도록 하여 사용자에게 웹 사이트의 친화성을 높입니다.

검색 상자를 Hover로 확장하는 것은 오늘날 현대 웹 사이트에서 사용하는 아이디어로 웹 사이트의 상단 탐색 모음에 배치하여 쉽게 볼 수 있습니다. 구현해야 할 작은 기능일지라도; 창의력을 발휘하여 사용자에게 좋은 경험을 제공하는 방식으로 검색 표시줄을 대화식으로 만들 수 있습니다.

자, 이것을 만들러 갑시다!

데모



Click 데모 보기!

애니메이션 검색 표시줄을 만들기 위해 Font Awesome을 사용했습니다. 따라서 태그에 Font Awesome 링크가 필요합니다. 매우 간단합니다. Font Awesome 사이트에 로그인하기만 하면 키트 코드가 제공됩니다.

Animated search bar with icon HTML CSS (source code)
 HTML 코드

<!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;
}


축하합니다! 이제 아이콘과 호버 효과로 Amazing Animated search bar을 성공적으로 만들었습니다.

내 웹사이트: codewithayan , 내 모든 놀라운 자습서를 확인하려면 여기를 참조하십시오.
견고함으로 돼지 저금통 스마트 계약 구축
Hello Python(음성 도우미)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage