运用css怎样做一个伸缩input搜索框效果？

发布时间：2022-11-14 11:12:15 所属栏目：语言来源：

导读：　　使用css怎样做一个伸缩input搜索框效果？在实际的项目中，我们常会遇到搜索框的实现需求，下文实现的搜索框效果是可伸缩的搜索框，实现效果如下，这里会使用到css3+贝塞尔曲线这个效果。

　　核心代码就是 tr

　　使用css怎样做一个伸缩input搜索框效果？在实际的项目中，我们常会遇到搜索框的实现需求，下文实现的搜索框效果是可伸缩的搜索框，实现效果如下，这里会使用到css3+贝塞尔曲线这个效果。

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

（编辑：我爱制作网_沈阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

串的定长顺序存储构架	什么叫做数组存储结构
二叉树的顺序存储结构	C++类和对象到底是哪个

运用css怎样做 一个伸缩input搜索框效果？

运用css怎样做一个伸缩input搜索框效果？