0元购京东自营斐讯K2路由器返399元活动
置顶

利用CSS3的transition属性制作可伸缩的输入框

作者:     目录: 小代码     发表: 2011年07月13日

今天在给 家乡美 jiaxiangmei.org 安装 WordPress 时,看了一下其自带的主题 Twenty Eleven,感觉此主题相当炫啊,采用HTML5和CSS3制作,有很多代码值得我们自己研究一下,今天先看一下其 搜索框 代码,此搜索框在活得输入焦点时,能够自动伸长,效果很好。

利用CSS3的transition属性制作可伸缩的输入框 预览

利用CSS3的transition属性制作可伸缩的输入框

查看其HTML 和 CSS代码后发现,主要是利用 CSS3 的 transition 属性,其CSS代码摘录如下:

<style type="text/css">
body{
	width:800px;
	margin:100px auto;}
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
input#s {
	background: url(search.png) no-repeat 5px 6px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-size: 14px;
	height: 22px;
	line-height: 1.2em;
	padding: 4px 10px 4px 28px;
}
input#searchsubmit {
	display: none;
}
#s {
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background;
	-o-transition-timing-function: ease;
	width: 72px;
}
#s:focus {
	background-color: #f9f9f9;
	width: 196px;
}
</style>

对 transition 有兴趣的朋友不妨也看看 利用 CSS3 的 transition 属性制作过渡效果的导航栏

2 个评论

  1. 格桑花 says:

    这个还真不知道啊 呵呵

  2. 你好!

    我想把自己现在博客用的wordpress主题prower的搜索框改成Twenty Eleven的搜索框这种样式,我试着按照文中的介绍,参考了预览中的例子,将原来主题的style.css和header.php改了一点,试了好多次但是没有成功。

    不知道应该怎么改呢,麻烦指点一下下。我只是自己改着玩一下,没有CSS等基础,目前只能照猫画虎。

    方便的话,希望可以给我发邮件(评论信息里面有填),谢啦!

格桑花进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注