跟着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一致加载失败,所以下载到本地用啦。