[CSS] transition을 이용한 검색 창 꾸미기

 

자바스크립트를 이용하면 쉽지만 

CSS의 transition만으로도 간단하게 화면을 꾸밀 수 있다

 

CSS

.navibar-search input {
  box-shadow: 3px 2px 1px #041562;
  border-radius: 5px;
  border: none;
  width: 150px;
  transition: all 1s;
  color: #041562;
}
.navibar-search input:focus {
  width: 300px;
}

transition = 1s(1초)에 걸쳐 시작과 최종 스타일을 보여줘

 

focus = 검색 창을 눌렀을때 

 

가로 150px(시작) 에서 300px(최종)으로 보여줌

 

1초에 걸쳐서

 

나머지 css는 검색 창을 꾸미는 용도라 신경쓰지 않아도 된다

 

그냥 input창으로 연습가능

 

끝

 

MDN에서는 대부분 브라우저에 호환 가능 하지만 그라디언트는 호환 불가

궁금하면 한번 읽어도 좋다

 

MDN - transtision