操作前后效果：（知识点和完整代码在最后面）
bilibili在线视频演示链接：
https://www.bilibili.com/video/BV18e4y1D7HS/?vd_source=5cc677504c9c936e5a0ea2042eb76a56完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>【前端实例代码】使用 HTML CSS 和 JavaScript 制作一个响应式搜索栏</title>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"/>
<style>
/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #4070f4;
overflow: hidden;
}
.input-box {
position: relative;
height: 55px;
max-width: 55px;
width: 100%;
margin: 0 40px;
border-radius: 6px;
background-color: #fff;
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.input-box.open {
max-width: 350px;
}
.input-box input {
position: relative;
height: 100%;
width: 100%;
padding: 0 15px 0 65px;
/*padding: 0 60px;*/
outline: none;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 400;
color: #333;
}
.input-box .open input {
padding: 0 15px 0 65px;
}
.input-box .search {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 60px;
border-radius: 6px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.input-box .open .search {
border-radius: 6px 0 0 6px;
}
.search .search-icon {
font-size: 30px;
color: #4070f4;
transform: rotate(90deg);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.input-box .open .search-icon {
transform: rotate(0deg);
}
.input-box .close-icon {
position: absolute;
right: -45px;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: #fff;
padding: 5px;
opacity: 0;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.input-box.open .close-icon {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) rotate(180deg);
}
</style>
</head>
<body>
<div class="input-box">
<input type="text" placeholder="Search..."/>
<span class="search">
<i class="uil uil-search search-icon"></i>
</span>
<i class="uil uil-times close-icon"></i>
</div>
<script>
let inputBox = document.querySelector(".input-box");
let search = document.querySelector(".search");
let closeIcon = document.querySelector(".close-icon");
search.addEventListener("click", () => inputBox.classList.add("open"));
closeIcon.addEventListener("click", () => inputBox.classList.remove("open"));
</script>
</body>
</html>涉及到的知识点：
1、HTML DOM querySelector() 方法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
扫描二维码关注公众号，回复：
14443730 查看本文章
语法
document.querySelector(CSS selectors)
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| CSS 选择器 | String | 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。 对于多个选择器，使用逗号隔开，返回一个匹配的元素。 提示： 更多 CSS 选择器，请参阅我们的 CSS 选择器参考手册。 |
技术细节
| DOM 版本: | Selectors Level 1 Document Object |
|---|---|
| 返回值: | 匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。 |
推荐阅读：
https://www.runoob.com/jsref/met-document-queryselector.html2、HTML DOM addEventListener() 方法
定义和用法
addEventListener() 方法用于向指定元素添加事件句柄。
提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
语法
element.addEventListener(event, function, useCapture)
参数值
| 参数 | 描述 |
|---|---|
| event | 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 |
| function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:
|
推荐阅读：
3、HTML DOM classList 属性
定义和用法
classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
语法
element.classList
Properties
| 属性 | Description |
|---|---|
| length | 返回类列表中类的数量 该属性是只读的 |
推荐阅读：