简单CSS3 让搜索更有爱

时间:2018-01-26 17:04:54 来源:

【摘要】 首先,请看右侧搜索位置,试试先!!(如果你用的是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;}

效果看本站搜索部分!!

点此查看实例展示

上一篇      下一篇
前端相关推荐 更多>>
简单HTML5打造内涵搜索框 CSS3详解:border color CSS3动画-wordpress读者墙 CSS3实例:纯CSS3写Google Chrome新LOGO CSS3详解:background CSS3详解:border-radius
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net