HTMLCSS做好看的动态搜索框
这些也是我个⼈的解读 可供⼩⽩参考。想要更多了解还是要⾃⼰练习。
（我也还是个⼩⽩ 噗哈哈哈）
开始了
这⾥是HTML写的框架
<!DOCTYPE html>
<html>
<head>
<meta charsert="UTF-8">
<link rel="stylesheet" href="cdn.bootcss/font-awesome/4.7.0/css/font-awesome.css">
<!-- 在国内使⽤fontawesome⽹站内的图⽚素材就要⽤到上⾯这么⼀条 -->
<link rel="stylesheet" href="style.css">
<!-- 使⽤外部样式这⾥我引⽤的外部样式⽂件名为style.css -->
<title> Awesome Search Box </title>
<!-- 这⾥是浏览⽹页时出现在⽹页顶端的标题啦 -->
</head>
<body>
<div class= "search-box"><!-- 先写⼀个容器出来 -->
<input class="search-txt" typ="text" name="" placeholder="type to search">
<!-- 这⾥是另外⼀个容器容器是可以嵌套的它被嵌套在上⾯这个容器⾥是输⼊⽂本⽤的 -->
<a class="search-btn" href="#">
<!-- 这⾥定义⼀个连接是空连接想使⽤别的连接你可以把#替换成你想⽤的连接 -->
<i class="fa fa-search" aria-hidden="true"></i>
<!-- 这个玩意是我从fontawesome⾥来的素材具体怎么来的⾃⼰去fontawesome看看就知道了 -->
</a>
</div>
</body>
</html>
下⾯是CSS样式
body{
margin:0;
padding:0;
/* 上来就给个这两设置让你的内容和页⾯⽆缝连接 */
background: #8e44ad;
/* 这个不⽤说了吧 */
}
.search-box{
position: absolute;/* 不确定容器的⼤⼩时使⽤  ,margin-lift  right都是知道容器⼤⼩时使⽤的  */ top: 50%;
left: 50%;
transform: translate(-50%,-50%);/* 以上三个设定容器在页⾯上居中对齐 */
background: white;
height:40px;
/* 给容器⼀个⾼度 */
border-radius: 40px; /* 允许元素添加圆⾓边框这⾥表⽰添加半径为40像素的圆⾓*/
padding:15px;
/* 相当于是内衬有15像素 */
}
.search-box:hover > .search-btn{
background: white;
}
.search-box:hover > .search-txt{/* 给悬停元素加样式设置悬停展开后的样式 */css去掉滚动条
width:230px;
padding: 0 10px;
}
.search-btn{
color: #8e44ad;
float:right;/* 设置元素浮动浮动向右 */
width:40px;
height: 40px;
border-radius: 50%;
background:  #2f3640;
display:flex;    没有这⼀条下⾯的两条也就⽆效了
justify-content: center;  管上下居中
align-items:center;    管左右居中
/*  这三个就是让这个放⼤镜图标居中*/
transition: 0.4s;
/
* 设置在某⼀段时间（0.4s）⾥改变css样式 */
text-decoration:none;
/* 让⽂本或内容⽆样式这⾥是去掉了放⼤镜这个图标的下划线应为设置连接后⾃动带下划线 */ }
.search-txt{
border:none;
background: none;
outline: none; /* 点击搜索时⽆轮廓出现 */
/* 以上三条去掉搜索框的边框背景以及轮廓线 */
float:left; /* 这⾥也设浮动不过是向左这样就可以和搜索图标在同⼀⽔平线了 */
padding:0;
color:white;
font-size: 20px;/* 字体⼤⼩ */
transition: 0.04s;
line-height :40px; /* 之前容器⾼度给了40像素这⾥⾏⾼也给40像素⽂字就可以居中显⽰了 */ width:0px; /* 把这个⽂本框宽度设置为0像素在⿏标未悬停时就不显⽰了从⽽达到变化效果 */
}