CSS3实现文本框焦点伸长效果

如果用过 苹果官网的搜索功能,就会发现,当搜索框获得焦点时会自动伸长,并且有动画效果,这是怎么实现的呢?

不需要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>
  • 你可能感兴趣的:(css,css3,前端开发)