Первое состояние, изображение лупы.
Второе состояние происходит после клика по первому, плавно изменяется ширина поля ввода поискового запроса.
Третье состояние происходит когда мы убираем фокус из поля ввода, запускается анимация на прокрутку лупы.
Итак давайте приступим к установке:
Установка CSS
Код
#search {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background:#fff;
width: 8px;
padding: 0 8px;
height: 24px;
font-size: 14px;
color: #666;
line-height: 24px;
border: 0;
outline: none;
border-radius: 50px;
position: relative;
z-index: 5;
-moz-transition: .1s ease;
-ms-transition: .1s ease;
-webkit-transition: .1s ease;
-o-transition: .1s ease;
transition: .1s ease;
...
Читать дальше »
