简单CSS3 让搜索更有爱

2011-06-08 分类：HTML/CSS 38人评论5,435次浏览

首先，请看右侧搜索位置，试试先！！（如果你用的是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 让搜索更有爱

您还可以继续浏览 css3 前端技巧的文章

29访客评论，博主回复8条

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

网站模板05-13 09:59 (4 天前)回复
#17
IE加一段这个就行了吧.

lml204610-25 22:04 回复
- 哪个？
  
  Hedgehog04-24 20:01 回复
  - 我就加了一段这个所有浏览器都兼容了。。不知道对不对。。
    
    lml204604-24 22:14 回复
    - 那就不用插代码，直接发就行啦，长不
      
      Hedgehog04-25 13:50 回复
      - 就是一个头信息，但是打不出来，
        
        lml204604-25 14:16 回复
      - 还是出不来
        
        Hedgehog04-25 14:19 回复
        
        不能发图片没办法，，，
        
        lml204604-25 14:22 回复
        
        晕了
        
        Hedgehog04-25 14:32 回复
#16
浩子，自己搞了个技术博客，拿你的Demo 当案例讲可以不？（注明出处和原作者）

水墨寒10-18 17:07 回复
- 木有问题，讲吧，顺便给个地址，观摩！
  
  浩子10-18 18:57 回复
  - http://blog.163.com/xin_soo/blog/static/196745111201191934824880/
    和朋友一起搞的博客
    
    水墨寒10-20 11:15 回复
#15
很有爱，很实用的一个效果！CSS3强大。

DD09-02 11:07 回复
- Yes，css3 strong！！！
  
  浩子09-05 16:33 回复
#14
效果很贊，不過貌似代碼挺多的哈。

sprityaoyao06-30 00:08 回复
- 有点多，不过蛮简单的！
  
  SongerToy07-05 23:12 回复
#13
这个创意不错啊….耗子哥….

那年夏天06-18 14:59 回复
#12
没看出效果浏览器不支持么

无锡美食06-17 13:39 回复
- 可能是的，Chrome有效
  
  浩子06-17 14:23 回复
#11
确实很赞的效果啊～～

Mr.小于06-15 14:39 回复
#10
其实我很想懂当鼠标放到订阅上的时候那一排订阅链接是怎么实现的，要不也专门写一段代码？

狗狗咪06-11 13:55 回复
- 这个是简单的js弹出显示，至于链接什么的可以直接看源码得知
  
  浩子06-11 22:08 回复
  - 为什么我的头像还不更新，我已经换过头像了，显示的还是那个灯泡状…
    
    狗狗咪06-12 10:30 回复
    - 有缓存的
      
      浩子06-13 07:17 回复
      - 更新下缓存呗
        
        狗狗咪06-15 22:59 回复
#9
这个很不错嘛

tony06-09 18:24 回复
#8
这个确实给力，chrome下效果杠杠的！

Ethan06-09 17:32 回复
- 哈哈，简单的css代码，很容易实现，但很温柔
  
  浩子06-09 20:58 回复
#7
呵呵呵我也做好了

satsun06-09 11:29 回复
#6
呵呵

satsun06-09 10:06 回复
#5
互换个链接吧大前端兄！！！！

satsun06-09 09:57 回复
- 可以的，加上!!
  
  浩子06-09 10:03 回复
#4
感觉边框不加粗，会更好一些。

Jayuh06-09 09:19 回复
- 嗯，加阴影是为了有立体突出的感觉
  
  浩子06-09 09:48 回复
#3
Chrome下，效果那是相当的喜欢。

罗伊06-08 22:42 回复
#2
不错，简单好看

減肥06-08 20:15 回复
#1
沙发.我用的chrome效果的确很赞~~

iSayme06-08 17:35 回复