本项目介绍了一个搜索栏项目，默认隐藏，仅显示搜索图标按钮，点击图标可以显示搜索栏，再次点击又会重新隐藏。
hidden-search.png
Html 部分定义了搜索栏。
<!DOCTYPE html>
<head>
<!-- 字符编码 -->
<meta charset="UTF-8" />
<!-- 虚拟窗口设置，宽度为设备宽度，缩放比例为1.0 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入外部CSS(主要是引入字体图标)，并添加完整属性和跨域设置 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<!-- 引入本地CSS -->
<link rel="stylesheet" href="style.css" />
<!-- 标题 -->
<title>Hidden Search</title>
</head>
<body>
<!-- 实际显示区域 -->
<div class="search">
<!-- 左侧文本，默认隐藏-->
<input type="text" class="input" placeholder="Search...">
<!-- 右侧按钮 -->
<button class="btn">
<i class="fas fa-search"></i>
</button>
</div>
<!-- 引入本地js-->
<script src="script.js"></script>
</body>
js部分为搜索图标所在的按钮添加了一个点击监听事件，用来为搜索栏元素添加或者去除active类名。
const search = document.querySelector('.search')
const btn = document.querySelector('.btn')
const input = document.querySelector('.input')
// 按钮监听点击事件
btn.addEventListener('click', () => {
// 切换类名active
search.classList.toggle('active')
// 使输入框聚焦
input.focus()
})
CSS 部分采用弹性布局，主要是为搜索栏添加了一个过渡效果，可以改变宽度。
* {
box-sizing: border-box; /* 采用 border-box 方式计算元素宽高*/
}
body {
/* 背景图案为渐变颜色 */
background-image: linear-gradient(90deg, #7d5fff, #7158e2);
font-family: sans-serif; /* 字体 */
display: flex; /* 布局方式采用弹性布局 */
align-items: center; /* 元素在容器垂直方向居中对齐，用于display: flex中 */
justify-content: center; /* 元素在容器水平方向居中对齐，用于display: flex中 */
height: 100vh; /* 高度为视口高度 100% */
overflow: hidden; /* 元素溢出部分隐藏 */
margin: 0; /* 元素外边距为0 */
}
.search {
position: relative; /* 使用相对位置 */
height: 50px; /* 元素高度为50px */
}
.search .input {
background-color: #fff; /* 设置背景颜色为白色 */
border: 0; /* 边框宽度为 0 */
font-size: 18px; /* 字体大小为 18px */
padding: 15px; /* 内边距为 15px */
height: 50px; /* 高度为 50px */
width: 50px; /* 宽度为 50px */
transition: width 0.3s ease; /* 过渡效果用于宽度，持续0.3s，使用ease（先快后慢） */
}
.btn {
background-color: #fff; /* 设置背景颜色为白色 */
border: 0; /* 边框宽度为 0 */
cursor: pointer; /* 设置光标样式为一只手 */
font-size: 24px; /* 字体大小为 24px */
position: absolute; /* 使用绝对位置 */
top: 0; /* 顶部偏移为0 */
left: 0; /* 左侧偏移为0 */
height: 50px; /* 高度为50px */
width: 50px; /* 宽度为50px */
transition: transform 0.3s ease; /* 过渡效果为 0.3s的转换，使用ease（先快后慢）*/
}
.btn:focus,
.input:focus {
outline: none; /* 没有外边框 */
}
.search.active .input {
width: 200px; /* 宽度为200px */
}
.search.active .btn{
transform: translateX(198px); /* 横轴移动 198px */
}
最终效果如下所示：
hidden-search.gif
