关注前端开发
关注用户体验

简单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 让搜索更有爱
分享到:更多 ()

评论 45

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #19

    试了下例子。发现焦点在输入框的时候,旁边的搜索按钮是没法按的,必须先把焦点冲输入框一开,等搜索框缩小再按。。

    fengbingji4年前 (2012-09-18)回复
  2. #18

    楼主是个皮肤控啊,哈哈,跟我一样。。没事拿来整皮肤!不过也算是进阶的一种方式!~熟能生巧!~
    ps:新版皮肤不错!~是我喜欢的类型

    网站模板5年前 (2012-05-13)回复
  3. #17

    IE加一段这个就行了吧.

    lml20465年前 (2011-10-25)回复
    • 哪个?

      Hedgehog5年前 (2012-04-24)回复

      • 我就加了一段这个所有浏览器都兼容了。。不知道对不对。。

        lml20465年前 (2012-04-24)回复
        • 那就不用插代码,直接发就行啦,长不

          Hedgehog5年前 (2012-04-25)
        • 就是一个头信息,但是打不出来,

          lml20465年前 (2012-04-25)
        • 还是出不来 ➡

          Hedgehog5年前 (2012-04-25)
        • 不能发图片没办法,,,

          lml20465年前 (2012-04-25)
        • 晕了

          Hedgehog5年前 (2012-04-25)
  4. #16

    浩子,自己搞了个技术博客,拿你的Demo 当案例讲 可以不?(注明出处和原作者)

    水墨寒5年前 (2011-10-18)回复
  5. #15

    很有爱,很实用的一个效果!CSS3强大。 :mrgreen:

    DD5年前 (2011-09-02)回复
    • Yes,css3 strong!!!

      浩子5年前 (2011-09-05)回复
  6. #14

    效果很贊,不過貌似代碼挺多的哈。

    sprityaoyao6年前 (2011-06-30)回复
  7. #13

    这个创意不错啊….耗子哥….

    那年夏天6年前 (2011-06-18)回复
  8. #12

    没看出效果 浏览器不支持么

    无锡美食6年前 (2011-06-17)回复
    • 可能是的,Chrome有效

      浩子6年前 (2011-06-17)回复
  9. #11

    确实很赞的效果啊~~

    Mr.小于6年前 (2011-06-15)回复
  10. #10

    其实我很想懂当鼠标放到订阅上的时候那一排订阅链接是怎么实现的,要不也专门写一段代码?

    狗狗咪6年前 (2011-06-11)回复
    • 这个是简单的js弹出显示,至于链接什么的可以直接看源码得知

      浩子6年前 (2011-06-11)回复
      • 为什么我的头像还不更新,我已经换过头像了,显示的还是那个灯泡状…

        狗狗咪6年前 (2011-06-12)回复
        • 有缓存的 :mrgreen:

          浩子6年前 (2011-06-13)
        • :mrgreen: 更新下缓存呗

          狗狗咪6年前 (2011-06-15)
  11. #9

    :mrgreen: 这个很不错嘛

    tony6年前 (2011-06-09)回复
  12. #8

    这个确实给力,chrome下效果杠杠的!

    Ethan6年前 (2011-06-09)回复
    • :mrgreen: 哈哈,简单的css代码,很容易实现,但很温柔

      浩子6年前 (2011-06-09)回复
  13. #7

    :mrgreen: 呵呵呵 我也做好了

    satsun6年前 (2011-06-09)回复
  14. #6

    😎 呵呵

    satsun6年前 (2011-06-09)回复
  15. #5

    💡 互换个链接吧 大前端 兄!!!!

    satsun6年前 (2011-06-09)回复
  16. #4

    感觉边框不加粗,会更好一些。 😳

    Jayuh6年前 (2011-06-09)回复
    • 嗯,加阴影是为了有立体突出的感觉

      浩子6年前 (2011-06-09)回复
  17. #3

    Chrome下,效果那是相当的喜欢。

    罗伊6年前 (2011-06-08)回复
  18. #2

    不错,简单好看

    減肥6年前 (2011-06-08)回复
  19. #1

    沙发.我用的chrome效果的确很赞~~ 😛

    iSayme6年前 (2011-06-08)回复

themebetter 国内更好的WordPress主题服务商

立即前往