1、html5代码如下:
<section class="topseacher">
<input type="text" id="searchinput" name="s" class="searchinput" placeholder="在这里搜索" />
<input type="submit" id="searchsubmit" class="buttons" value="→" />
</section>
2、css3代码如下:
/*搜索容器*/
.searchinput{
float:left; /*对齐*/
width:160px; /*宽度*/
height:28px; /*高度*/
padding:0 0 0 5px; /*内间距*/
border:#063 1px solid; /*边框*/
border-right:none; /*右边框*/
color:#949494; /*字体颜色*/
overflow:hidden; /*溢出*/
font-size:12px; /*字号*/
-webkit-transition:width .4s ease-in; /*动画效果:允许CSS的属性值在一定的时间区间内平滑地过渡*/
}
/*搜索栏:鼠标放上时候*/
.searchinput:hover{ /*鼠标划过时的样式*/
width:240px; /*宽度*/
color:#222; /*颜色*/
}
/*搜索栏:获得焦点时候*/
.searchinput:focus{ /*获得焦点时*/
outline:none; /*外边框*/
}
/*搜索按钮*/
.buttons{
float:left; /*浮动位置*/
height:30px; /*高度*/
width:40px; /*宽度*/
cursor:pointer; /*鼠标指针*/
border:#063 1px solid; /*边框*/
border-left:none; /*左边框*/
background:hsla(120,100%,20%,1); /*背景*/
color:#fff; /*颜色*/
}
/*搜索按钮:鼠标放上时*/
.buttons:hover{
background:#903; color:#fff; /*颜色*/
}
在chrome浏览器上显示效果如下:
注意:
1、当你把transition放在.searchinput里面时,移下移上都会很平滑,但放在.searchinput:hover里面时,只有在移上时平滑,移下时就很生硬了。
2、.topseacher里是right还是left,决定宽度向哪个方向运动。