CSS3实例学习1-搜索框

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,决定宽度向哪个方向运动。