纯css+html实现伸缩式动态搜索框

最新推荐文章于 2024-02-23 23:51:32 发布

node_bin

最新推荐文章于 2024-02-23 23:51:32 发布

阅读量594

点赞数

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_41848005/article/details/127012807

版权

本文详细讲解如何使用纯css和html创建一个响应式的搜索框，该搜索框在用户交互时能动态伸缩显示输入区域，提供了一种常见的前端交互效果实现方法。

摘要由CSDN通过智能技术生成

本文将要介绍如何用纯css加上html实现一个伸缩式的搜索框，相信平时应该会经常在各种网站上看到这种动态按钮，通过移入之后才会展示可以输入，或者点击的内容，今天就来用html+css实现一个

<div class="search-box">
  <a class="search-btn">
    <i class="fa fa-search" aria-hidden="true"></i>
  </a>
  <input type="text" class="search-txt" placeholder="搜索" />
  <div class="search-line"></div>
</div>

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #f8cb59;
}
.search-line {
    position: absolute;
    left: 62px;
    bottom: 10px;
    width: 0px;
    height: 2px;
    background-color: rgb(251, 121, 0);
    transition: 0.3s;
}
.search-box {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background-color: white;
    box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.1);
    h