分类:
前端
直接上代码
<!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;
}这个来源于b站的一个大佬：
不愿透漏姓名的红领巾大会员
大家有想法的可以去看看他往期的视频！
欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739
评价
