文档章节

简单CSS3 让搜索更有爱

前端老手
 前端老手
发布于 09/17 22:52
字数 220
阅读 13
收藏 0

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

效果看本站搜索部分!!



本文转载自:https://www.mk2048.com/blog/blog.php?id=10cbi1jhj

前端老手
粉丝 10
博文 630
码字总数 0
作品 0
卢湾
技术主管
私信 提问
分享10款漂亮实用的CSS3按钮

昨天向大家介绍了一些精美的菜单《分享简单而实用的网页菜单导航》。这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你...

tp_wire
2012/06/15
266
0
7 个超级震撼的 CSS3 按钮组合

我们可以用精美的背景图片和CSS代码制作出非常漂亮的按钮,但在某些特殊的页面上,或者你需要让按钮更有动感从而让你的用户眼前一亮,那么就试试 用CSS3技术吧,CSS3新增的很多属性能让按钮具...

tp_wire
2012/06/30
10K
28
小创意:圣诞球切换开关

小创意:圣诞球切换开关 设计达人2017-12-200 阅读 CSS3HTMLcssCSS 还有几天就到圣诞节,几乎到哪里都能看到圣诞气氛的设计,网站也是如此,为了让网站页面更有气氛,我们不能放过任何小创意...

设计达人
2017/12/20
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
2018/04/25
0
0
12个炫酷实用的HTML5带发光动画

在网页设计中,很多元素都可以实现发光的动画效果,比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用...

fishzhang8
2017/09/25
2
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
32分钟前
4
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
7
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
10
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
14
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部