伸缩搜索html代码,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搜索框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！