关注前端开发
HTML5、CSS3、Javascript

简单CSS3 让搜索更有爱

首先,请看右侧搜索位置,试试先!!(如果你用的是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;
}
<form action="/index.php" method="get"><input type="text" name="s" /> <input type="submit" value="搜索" /></form>

效果看本站搜索部分!!

点此查看实例展示

转载请注明出处大前端 » 简单CSS3 让搜索更有爱

分享: