CSS实现动态搜索框

最新推荐文章于 2023-11-08 17:45:05 发布

HNU_GeorgeYang

最新推荐文章于 2023-11-08 17:45:05 发布

阅读量2.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44336275/article/details/103681918

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

跟着B站的前端教学做哒，自己添加了一点东西并且修复了一个bug。
哔哩哔哩：使用HTML CSS完成一个出色的搜索框

直接上效果gif吧
在这里插入图片描述

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" href="F:\大三学习\前端\滑动搜索框\font_1579520_zs0rsxpibga\iconfont.css">

</head>

<body>
    <div class="search-box">
        <input class="search-text" type="text" name="" placeholder="Search" maxlength="20">
        <a class="search-btn" href="#">
            <!-- <img class="search-icon" src="search.png">        -->
            <span class="iconfont icon-search"></span>
        </a>
    </div>
</body>

</html>

CSS:

body{
    margin: 0;
    padding: 0;
    background: #e74c3c;
}

.search-box{
    /* 绝对定位 水平垂直居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #2f3640;
    border-radius: 40px;
    padding: 20px;

    /* 搜索盒子中元素居中 */
    align-items: center;

    /* 盒子初始宽高 40px  正好包裹内部的.search-btn*/
    height: 40px;
    width: 40px;

    /* 宽度变化贝塞尔曲线 */
    transition:width  cubic-bezier(0.68, -0.25, 0.27, 1.55)  .8s;

    box-shadow: 0 15px 20px rgba(0,0,0,.8);
}
.search-btn{
    color: #e84118;
    /* 固定定位 */
    position: fixed;
    /* 放在search-box的右边20px处*/
    right: 20px;

    /* 其内部的搜索突变flex布局 会保持在中央*/
    display: flex;
    justify-content: center;
    /* 少了这个就不能垂直居中了  */
    align-items: center;    

    /* btn的大小 */
    width: 40px;
    height: 40px;

    /* 圆形边缘 */
    border-radius: 50%;
    background: #2f3640;
    border-bottom: none;
}

/* 设置<a>中嵌套icon的大小和<a>一致 */
.search-icon{
    width: 40px;
    height: 40px;
}

/* 设置输入框 */
.search-text{
    /* 设置左浮动 所以会跟在外面的search-box的左侧移动 */
    float: left;
    padding: 0;
    line-height: 40px;
    max-inline-size: 200px;
    
    /* 初始宽度为0 整个search-box的大小为40px*40px */
    width: 0px; 

    /* 去除默认输入框的背景、描边、边框 */
    background: none;
    outline: none;
    border: none;

    /* 添加白色下划线 */
    border-bottom: #bdc3c7 2px solid;


    /* 字体颜色、大小 */
    color: white;
    font-size: 16px;

    /* 过度动画 和search-box一致*/
    transition:width  cubic-bezier(0.68, -0.25, 0.27, 1.55)  .8s;
}


/* 鼠标移动到search-box上的动画 */

/* 首先是search-box变长 其实可以不设置其width属性 由内部的search-text和search-btn撑开
    但是在浏览器放大到一定比例时，会出现search-btn被挤到另一行的现象
    所以还是设置一下search-box的长度
*/
.search-box:hover {
    width: 240px;
}

/* 设置search-text的宽度 */
.search-box:hover > .search-text{
    width: 200px; 
}
/* search-btn背景颜色变化 */
.search-box:hover > .search-btn{
    background: #bdc3c7;
}

icon本来想直接引用iconfont的，但是css一致加载失败，所以下载到本地用啦。

HNU_GeorgeYang

关注

1
点赞
踩
26

收藏

觉得还不错? 一键收藏
1
评论
CSS实现动态搜索框

跟着B站的前端教学做哒，自己添加了一点东西并且修复了一个bug。哔哩哔哩：使用HTML CSS完成一个出色的搜索框直接上效果gif吧HTML:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</t...
复制链接

扫一扫

专栏目录