使用css咋做一个伸缩input搜索框效果？

发布时间：2023-08-05 14:26:42 所属栏目：语言来源：

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

核心代码就是 transiti

使用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>

</html>

（编辑：聊城站长网）

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