简单CSS3 让搜索更有爱
更新时间：2018-01-26 17:08:02 来源： 阅读量：
【摘要】 首先，请看右侧搜索位置，试试先！！（如果你用的是IE，悲剧了） 小小的动画，是css3实现的，很有爱，有木有！！代码如下： searchdemo {
首先，请看右侧搜索位置，试试先！！（如果你用的是IE，悲剧了）
小小的动画，是css3实现的，很有爱，有木有！！
代码如下：
.searchdemo {display:inline-block;position:relative;height:27px;margin:60px;}.searchdemo:hover {-webkit-box-shadow:0 0 3px #999;-moz-box-shadow:0 0 3px #999}.searchdemo .sinput {float:left;width:130px;height:19px;line-height:19px;padding:3px 5px;border:#A7A7A7 1px solid;background:white;color:#888;font-size:12px;-webkit-transition:.3s;-moz-transition:.3s;outline: none;}.searchdemo .sinput:focus {width:200px;}.searchdemo .sbtn {cursor:pointer;height:27px;font-size:12px;float:left;width:50px;margin-left:-1px;background:#eee;display:inline-block;padding:0 12px;vertical-align:middle;border:#A7A7A7 1px solid;color:#666;}.searchdemo .sbtn:hover {background:#ddd;}效果看本站搜索部分！！
点此查看实例展示