방법 - 애니메이션 검색 양식
CSS로 애니메이션 검색 양식을 만드는 방법을 알아보세요.
애니메이션 검색 양식을 만드는 방법
입력 필드를 클릭하십시오.
1단계) HTML 추가:
예시
<input type="text" name="search" placeholder="Search..">
2단계) CSS 추가:
예시
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets
focus, change its width to 100% */
input[type=text]:focus {
width: 100%;
}
팁: HTML 양식 에 대해 자세히 알아보려면 HTML 양식 자습서 로 이동하십시오 .
HTML 양식의 스타일을 지정하는 방법에 대해 자세히 알아보려면 CSS 양식 자습서 로 이동하십시오 .