• HTML+CSS:动态搜索框


    效果演示

    42-动态搜索框.gif

    这段代码实现了一个简单的搜索栏效果。页面背景为从天蓝色到深蓝色的渐变色,搜索栏包括一个圆形背景的搜索图标和一个输入框。当用户点击搜索图标时,输入框会从搜索图标的位置滑出,显示一个输入框和一个清除按钮。用户可以在输入框中输入搜索内容,点击右侧的按钮进行搜索。整体布局居中显示在页面上。

    Code

    <div class="searchBar">
        <div class="icon"><i class="iconfont icon-sousuoxiao">i>div>
        <div class="textInput">
            <input class="inp" type="text" placeholder="请输入搜索关键字">
            <button class="goBtn">gobutton>
            <div class="clear"><i class="iconfont icon-close">i>div>
        div>
    div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    * {
        margin: 0; /* 设置所有元素的外边距为0 */
        padding: 0; /* 设置所有元素的内边距为0 */
        box-sizing: border-box; /* 设置盒模型为border-box,包括内边距和边框在内的尺寸计算方式 */
    }
    
    body {
        width: 100vw; /* 设置body宽度为视口宽度 */
        height: 100vh; /* 设置body高度为视口高度 */
        background: linear-gradient(to bottom, skyblue, #003462); /* 设置背景为从上到下的线性渐变色 */
        display: flex; /* 使用flex布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    
    .searchBar {
        width: 60px; /* 设置搜索栏宽度 */
        height: 60px; /* 设置搜索栏高度 */
        background-color: #fff; /* 设置背景颜色为白色 */
        box-shadow: 0 0 10px rgba(0, 0, 0, .4); /* 设置阴影效果 */
        border-radius: 60px; /* 设置圆角为半径的大小 */
        position: relative; /* 设置相对定位 */
        overflow: hidden; /* 超出部分隐藏 */
        transition: .5s; /* 设置过渡效果时长为0.5秒 */
    }
    
    .icon {
        width: 60px; /* 设置图标容器宽度 */
        height: 60px; /* 设置图标容器高度 */
        display: flex; /* 使用flex布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        cursor: pointer; /* 鼠标移上去显示手型 */
    }
    
    .icon i {
        color: dodgerblue; /* 设置图标颜色为深蓝色 */
        font-size: 30px; /* 设置图标大小为30像素 */
    }
    
    .textInput {
        width: 320px; /* 设置输入框宽度 */
        height: 60px; /* 设置输入框高度 */
        display: flex; /* 使用flex布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        background-color: blue; /* 设置背景颜色为蓝色 */
        position: absolute; /* 设置绝对定位 */
        top: 0; /* 顶部对齐 */
        left: 60px; /* 距离左侧60像素 */
    }
    
    .textInput input {
        width: 100%; /* 输入框宽度占满父容器 */
        height: 100%; /* 输入框高度占满父容器 */
        border: none; /* 去除边框 */
        outline: none; /* 去除外边框 */
        font-size: 18px; /* 设置字体大小为18像素 */
    }
    
    .clear {
        width: 15px; /* 设置清除按钮宽度 */
        height: 15px; /* 设置清除按钮高度 */
        position: absolute; /* 设置绝对定位 */
        right: 22%; /* 距离右侧22% */
        top: 50%; /* 顶部对齐 */
        transform: translateY(-50%); /* 垂直居中 */
        cursor: pointer; /* 鼠标移上去显示手型 */
        display: flex; /* 使用flex布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    
    .clear i {
        color: #999; /* 设置清除图标颜色为灰色 */
    }
    
    .goBtn {
        width: 12%; /* 设置按钮宽度为父容器宽度的12% */
        height: 60%; /* 设置按钮高度为父容器高度的60% */
        position: absolute; /* 设置绝对定位 */
        top: 20%; /* 距离顶部20% */
        right: 0; /* 靠右对齐 */
        border-radius: 8px; /* 设置圆角为8像素 */
        outline: none; /* 去除外边框 */
        border: none; /* 去除边框 */
        color: #fff; /* 设置文字颜色为白色 */
        box-shadow: 0 0 2px rgba(0, 0, 0, .4); /* 设置阴影效果 */
        background: linear-gradient(skyblue, deepskyblue); /* 设置背景为从天蓝色到深天蓝色的线性渐变色 */
        cursor: pointer; /* 鼠标移上去显示手型 */
    }
    
    .changeWidth {
        width: 400px; /* 设置具有changeWidth类名元素的宽度为400像素 */
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95

  • 相关阅读:
    31 | linux 压缩和解压文件常用的8种命令
    基于SSM的在线投稿系统设计与实现
    MySQL【子查询】
    [2022 牛客多校2 E] Falfa with Substring (二项式反演 NTT)
    生成指定位数的随机验证码
    vue3父子组件传对象,子组件访问修改父组件对象中的属性值
    elementui tree组件自定义内容,实现移入label显示操作按钮
    【市场解读】掌握MT4外汇交易的核心技巧
    JSP课设:学生选课系统(附源码+调试)
    2022年找工作确实不易
  • 原文地址:https://blog.csdn.net/weixin_72553980/article/details/136265595