话不多说,上效果图。
核心代码就是 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搜索框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
前言 在前端工程化日趋复杂的今天,模块打包工具在我们的开发中起到了越来越重要...
作者:Ahmad shaded 译者:前端小智 来源:sitepoint 点赞再看,养成习惯 本文 G...
本文主要介绍了AmazeUI 输入框组的示例代码,分享给大家,具体如下: !doctype h...
许久没有写博客了,最近有个H5启动APP原生页面的需求,中间遇上一些坑,看了些网...
使用技术 itext.jar : 将byte文件输入流转换为图片,pdf等 html2canvas.js :将h...
数据库是什么 数据库管理系统,简称为DBMS(Database Management System),是用...
超级计算作为“大计算”领域的另一大分支,一般会被用来与云计算进行优劣势类比...
在线预览 https://jsrun.pro/AafKp/ 先看效果: 第一步,实现网格背景: backgro...
在 Kotlin 中使用 Android 的 Java API 时,您会迅速意识到这样的做法失去了 Kot...
运用场景: 新需求有个项目是要做问卷调查,其中必然会涉及到很多题目,以及一个...