w3.css
움직이는 검색 양식
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%;
}
기본 예시
예제 보기참고
W3C School - How TO - Animated Search Form
공부 목적 블로그