原

好看的搜索框

5945人阅读 2019/4/11 1:00 总访问：3467515 评论：1 收藏：0 手机

分类: 前端

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
</head>
<body>
<div class="search-box">
<input class="search-txt" placeholder="Type to search" type="text">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>

css：

body{
margin: 0;
padding: 0;
background-color: #0984e3;
}
.search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
/* 特效 */
.search-box:hover > .search-txt{
width: 240px;
padding: 0px 6px;
}
.search-box:hover > .search-btn{
background-color: white;
}
.search-btn{
color: #e84118;
width: 40px;
height: 40px;
background-color: #2f3640;
display:flex;
text-decoration: none;
border-radius: 50%;
/* 左右居中 */
justify-content:center;
/* 上下居中 */
align-items: center;
transition: 0.4s;
float: right;
}
.search-txt{
background: none;
box-sizing: border-box;
color: white;
border: none;
outline: none;
line-height: 40px;
font-size: 16px;
width: 0px;
transition: 1s;
float: left;
}