欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

简单CSS3 让搜索更有爱

发布时间:2015-07-23  编辑:杨雨个人博客网站   点击:   

首先,请看右侧搜索位置,试试先!!(如果你用的是IE,悲剧了)

简单CSS3 让搜索更有爱

简单CSS3 让搜索更有爱

小小的动画,是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" /> <input type="submit" value="搜索" /></form>

效果看本站搜索部分!!

本文地址:http://itbyc.com/web/css3/2533.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1