如果用过苹果官网的搜索功能,就会发现,当搜索框获得焦点时会自动伸长,并且有动画效果,这是怎么实现的呢?不需要Flash,不需要JavaScript,纯CSS3就可以实现,先看看Demo(不支持IE内核浏览器):
CSS代码:
input, textarea{
color: #888;
padding: 5px;
margin: 10px;
outline: none;
overflow:hidden;
border-radius: 5px;
background: #fafafa;
border: 1px solid #ddd;
-moz-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
}
.style1{
width: 150px;
}
.style1:focus{
width: 230px;
}
.style2{
float: right;
width: 150px;
}
.style2:focus{
width: 230px;
}
.style3{
width: 10%;
}
.style3:focus{
width: 98%;
}
.style4{
height: 2em;
width: 230px;
}
.style4:focus{
height: 8em;
}
HTML代码:
<input class="style1" type="text" value="向右伸长" />
<input class="style2" type="text" value="向左伸长" />
<br />
<input class="style3" type="text" value="如意金箍棒" />
<br />
<textarea class="style4">下面有什么东西呢?
笑脸一枚 O(∩_∩)O
哈哈~</textarea>
=======================签 名 档=======================
原文地址(我的博客):http://www.clanfei.com/2012/05/1217.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================