更新第36个小实例
This commit is contained in:
parent
7f2f412d86
commit
01054ee3a1
|
@ -39,4 +39,5 @@
|
|||
32. HTML5+CSS3小实例之毛玻璃炫光按钮
|
||||
33. HTML5+CSS3小实例之手机充电特效
|
||||
34. HTML5+CSS3小实例之超酷的字体发光效果
|
||||
35. HTML5+CSS3小实例之超酷的文字滚动特效
|
||||
35. HTML5+CSS3小实例之超酷的文字滚动特效
|
||||
36. HTML5+CSS3小实例之伸缩式动态搜索框
|
|
@ -0,0 +1,55 @@
|
|||
body{
|
||||
/* 初始化 取消内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#e3eeff,#f3e7e9);
|
||||
}
|
||||
.search-box{
|
||||
/* 绝对定位 水平垂直居中 */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
background-color: #2f3640;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.search-txt{
|
||||
border:none;
|
||||
background: none;
|
||||
outline: none;
|
||||
float: left;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
width: 0;
|
||||
/* 动画过渡 */
|
||||
transition: 0.4s;
|
||||
}
|
||||
.search-btn{
|
||||
color: #e84118;
|
||||
float: right;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #2f3640;
|
||||
/* 弹性布局 水平垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
/* 动画过渡 */
|
||||
transition: 0.4s;
|
||||
}
|
||||
.search-box:hover .search-txt{
|
||||
width: 200px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.search-box:hover .search-btn{
|
||||
background-color: #fff;
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>伸缩式动态搜索框</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/36.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="search-box">
|
||||
<input type="text" class="search-txt" placeholder="想搜啥?" />
|
||||
<a class="search-btn">
|
||||
<i class="fa fa-search" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue