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

最新推荐文章于 2021-06-03 15:48:16 发布
VIP文章 最新推荐文章于 2021-06-03 15:48:16 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sheng_li/article/details/79985679
版权

话不多说，上效果图。

核心代码就是 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 ht
最低0.47元/天 解锁文章
李逸风
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
30个非凡的CSS技巧和例子
大番薯
08-22 864
1. Hoverbox Image Gallery A pure css-based gallery; hovering over an image enlarges it.  2. Advanced CSS Menu A creative and complex navigation scheme. 3. Sliding Photograph Galleries
html 折叠搜索框,使用css3和jquery实现可伸缩搜索框
weixin_42412850的博客
05-31 645
HTML在需要放置搜索条的页面中放置如下html代码，搜索条#search_bar包含一个form#myform表单，表单中放置一个搜索输入框#search，一个搜索按钮.search_btn以及搜索按钮图标.search_ico。复制代码代码如下:CSS我们通过CSS来将整个搜索条布局美化，其中我们使用了CSS3代码。复制代码代码如下:.search_bar{position: relative...
css实现可伸缩的搜索框
weixin_30251587的博客
05-15 1203
效果图： 代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>可伸缩搜索框demo</title> ...
纯CSS实现平滑伸缩的搜索框【前端开发技能必备系列】
weixin_30624825的博客
05-31 368
有个朋友看到一个能伸缩的搜索框，叫我给他做。我到他所说的网站看了一下，马上告诉他：这个能伸缩的框框得用 js 辅助才能实现，要是为了图方便，在页面上调用一个百十来K的js框架，就太不值得了，建议他不要实现这个功能了。但是，今天又看到类似的一个搜索框，仔细扒了代码，才发现，这个伸缩功能只用CSS就可以实现！我又误人子弟了...... 经常使用IE的朋友（园里应该不多了吧）请换个浏览器测试，因为.....
css搜索框样式
Wisdom—Yoga—TaciturnKnight（WYT）
03-01 3710
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
CSS组件-搜索框
王甲评的博客
12-06 1399
转自慕课网，个人感觉比较萌新的风格，收藏下 代码： 8款纯CSS3搜索框 * { box-sizing: border-box; } body { margin: 0; padding: 0; background: #494A5F; font-weight: 500; font-family: "Microso
来个模态kuang_6个模态弹出框动画
weixin_39963341的博客
02-12 70
CSS语言：CSSSCSS确定#modal-skew-from-left {top: 50%;left: 0;transform: skewX(40deg) translate(-200%, -50%);transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);}#modal-skew-from-left.show {left: 50%;t...
如何反转CSS中的贝塞尔曲线的实现方法
12-14
首先来看一看我之前写的一个CSS轮播动画效果，为了让切换时动画的过渡更加的平滑我在animation-timing-function属性中并没有使用CSS提供的各种关键词，而使用了cubic-bezier（贝塞尔）函数。 贝塞尔函数乍一看会让...
h5画布+贝塞尔曲线实现刻字效果
09-12
html5画布+贝塞尔曲线实现在线刻字效果。 可用于在饰品，或礼品上刻字等需求。 曲线坐标值 需在线上svg编辑器中 自行手绘获取，再填入代码中相应配置。
CSS3制作炫酷搜索框动画特效
03-21
一款很炫的css3的搜索框
Android仿京东顶部搜索框滑动伸缩动画效果
08-25
主要为大家详细介绍了Android仿京东顶部搜索框滑动伸缩动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS3搜索框展开收缩动画特效
06-11
一款霓虹样式非常漂亮的CSS3搜索框展开收缩动画特效，搜索按钮是圆形，搜索框也是圆角样式，相当美观。
CSS3贝塞尔曲线示例：创建链接悬停动画效果
01-18
我们还将看一下CSS3 Cubic-Bezier（贝塞尔）曲线，它是 CSS 过渡，为弹出框提供了更加流畅的运动，而不是僵化的机械运动。 这是我们最后的效果： 让我们开始吧！ HTML 部分 这是我们链接的 HTML，图标来自 ...
css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况
热门推荐
web_xyk的专栏
04-21 1万+
    当大家开始做css3动画的时候，了解贝塞尔曲线就成了不可或缺的。“贝赛尔曲线”是由法国数学家Pierre Bézier所发明，由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。这里主要说贝塞尔曲线在css3中的运用，三次方公式，四个点确定    三阶贝塞尔曲线由四个点确定，那么css3的贝塞尔函数cubic-bezier(x1,y1,x2,y2)只有两...
仿思否可伸缩input搜索框
alexis7的博客
03-22 359
手写带有伸缩效果的input输入框 最近在逛思否的时候，看到思否的搜索输入框伸缩动画挺有趣的，希望可以用在自己写的网站中 我的第一反应是思否用的什么组件库，比如element，layUI，viewUI，Bootstrap什么的，但是找了这几家网站都没有找到带有伸缩动画的input输入框，实在没办法了，只能自己写一个，直接源码附上： <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'&gt
CSS3实现可伸缩输入框
justforuse的博客
05-30 3079
html文件：<input type="text">css文件：input{ border: 1px solid #CCC; cursor: pointer; height: 30px; margin: 3px 0; text-indent:10px; position: relative; transition: width 400ms ea
搜索框的动态伸缩原生代码简单实现
LMlikoSakura的博客
09-05 2268
现在大多数的网站搜索框只是一个搜索的icon图，只有当你鼠标一上去的时候才会自动伸长输入搜索，移开时自动收缩 话不多说上代码 html部分使用icon和input两个部分，加上简单的css样式实现，如图 当你的鼠标移上去的时候，长度增加到自己想要的或者合适的长度即停止 js代码主要使用setInterval实现， width++反之--；同时添加当长度和时候自动添加输入光标由s...
html input 自动伸缩,Html页面input自动获得焦点
weixin_29802189的博客
06-03 326
只要在该input标签后添加autofocus=“autofocus"即可代码实例：用户名：密码：focus 不生效:在执行一段脚本时，对dom的操作应当是即时生效的。dom操作确实都是同步的。但是因dom改变而触发的事件，以及其他一些效应(例如样式应用)，很可能是异步的。所以，focus这里可能是有延迟的。也有人说脚本对dom的操作不是即时生效的，浏览器可能执行完当前脚本所有代码后才真正处理脚本...
css 贝塞尔曲线边框
最新发布
06-09
可以使用 CSS 的 `border-image` 属性来实现贝塞尔曲线边框效果。具体实现步骤如下： 1. 使用贝塞尔曲线工具生成贝塞尔曲线代码。 2. 在 CSS 中定义 `border-image` 属性，其中 `source` 属性为一个图片，可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值