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

作者:     目录: PHP+MySQL     发表: 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 个评论

Post Comment

Your email address will not be published. Required fields are marked *