css3+贝塞尔曲线实现可伸缩input搜索框效果

话不多说，上效果图。

核心代码就是 transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 1s; 通过 transition 属性的 cubic-bezier（贝塞尔曲线） 在过渡效果上加了个缓冲效果。 html代码部分主要模块就是一个input 外加一个 父级 div  div宽度需要大于input宽度 不加 cubic-bezier 可以实现这个效果  transition: all 1s;

就是过渡效果少了个缓冲效果
我们这里使用到的运动曲线是

最后奉上完整代码

    
 
 
     .search-wrap{
  margin: 0 auto;
  width: 200px;
  height: 200px;
     }
     .search{
  width: 50px;
  height: 30px;
  margin: 20px 10px 0 0;
  border: 1px solid #4000FF !important;
  padding: 0 10px;
  float: right;
  border-radius: 5px;
  color: #fff;
  transition: all 1s;
  opacity: .5;
     }
     .search:focus{
  width: 100%;
  outline:none;
     }
 
    
    
 
     
 
    

到此这篇关于css3+贝塞尔曲线实现可伸缩input搜索框效果的文章就介绍到这了,更多相关css3贝塞尔曲线伸缩input搜索框内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！