html在搜索栏中加入放大镜,CSS3 搜索条动画（放大镜图标展开为长方形输入框）...

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

body {

background-color: #ff9800;

}

#content {

position: absolute;

top: 30%;

left: 50%;

width: 200px;

height: 50px;

margin: 0 auto;

}

.circle {

width: 42px;

height: 42px;

border: 4px solid #fff;

border-radius: 50%;

cursor: pointer;

transition: all 400ms ease-in-out;

}

.hide {

width: 0;

transition: all 400ms ease-in-out;

}

input,

input:focus {

background: none;

margin-left: 20px;

padding: 10px 0;

width: 260px;

border: none;

color: #fff;

font-size: 16px;

font-weight: 300;

font-family: Open Sans, Arial, Helvetica;

outline: 0;

}

.line {

width: 22px;

height: 4px;

background-color: #fff;

transform: rotate(45deg);

margin-top: 0px;

margin-left: 38px;

transition: all 400ms ease-in-out;

}

.close {

margin-top: -25px;

margin-left: 12px;

cursor: pointer;

transition: all 400ms ease-in-out;

}

.close:after {

content: "";

display: block;

width: 22px;

height: 4px;

background-color: #fff;

transform: rotate(90deg);

margin-top: -25px !important;

margin-left: 0;

cursor: pointer;

transition: all 400ms ease-in-out;

}

.close:hover {

transform: rotate(225deg);

}

.square {

margin-left: -260px;

border-radius: 0;

width: 300px;

ttransition: all 400ms ease-in-out;

}