网站地图    收藏   

主页 > 前端 > css3 >

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

来源:自学PHP网    时间:2020-09-27 17:55 作者:小飞侠 阅读:

[导读] css3+贝塞尔曲线实现可伸缩input搜索框效果...

今天带来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;

 

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


以上就是关于css3+贝塞尔曲线实现可伸缩input搜索框效果全部内容,感谢大家支持自学php网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论