HTML 및 CSS 아이콘이 있는 멋진 애니메이션 검색 표시줄

3561 단어 csswebdevhtmltutorial
안녕하세요 Devs, 오늘 우리는 HTML과 CSS를 사용하여 아이콘이 있는 멋진 애니메이션 검색 표시줄을 만들 것입니다. 그것을 만들려면 Font awesome 키트가 필요합니다. 이 게시물을 즐기시기 바랍니다.

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

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

데모




이제 데모를 보았으므로 CSS와 HTML로 이것을 만들어 보겠습니다. 애니메이션 검색 표시줄을 만들기 위해 Font Awesome을 사용했습니다. 따라서 태그에 Font Awesome 링크가 필요합니다. 매우 간단합니다. Font 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 자습서를 확인하십시오.
  • Responsive footer design in HTML and CSS
  • Random Password Generator app in Javascript Source code
  • Glassmorphism Login Form using HTML and CSS

    • 내 웹사이트: codewithayan , 내 모든 놀라운 자습서를 확인하려면 여기를 참조하십시오.
    완전한 웹사이트를 만들기 위해 SvelteKit과 함께 어떤 라이브러리를 사용합니까?
    Linux: YUM으로 RPM 패키지 관리

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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