CSS
语言：
CSSSCSS
确定
@import url(/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;
}
如果觉得《html在搜索栏中加入放大镜 CSS3 搜索条动画（放大镜图标展开为长方形输入框）...》对你有帮助，请点赞、收藏，并留下你的观点哦！
