HTML+CSS:动态搜索框

效果演示

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

Code

html 复制代码
<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">go</button>
        <div class="clear"><i class="iconfont icon-close"></i></div>
    </div>
</div>
css 复制代码
* {
    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 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书