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

时间：2021-05-08

话不多说，上效果图。

核心代码就是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;

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

最后奉上完整代码

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .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; } </style> </head> <body> <div class="search-wrap"> <input type="text" name="" class="search"> </div> </body></html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章