标签：70px color 50% height 案例 搜索 background 动态 border
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #E17055;
}
.box {
/* width: 70px; */
height: 70px;
background-color: #2f3640;
border-radius: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
}
input[type=text] {
width: 0px;
height: 70px;
border-radius: 35px;
border: none;
/* 去除默认边框 */
outline: none;
/* 去除选中的边框 */
float: left;
font-size: 30px;
color: white;
background-color: #2F3640;
line-height: 70px;
/* 垂直居中 */
transition: all 0.5s;
/* 拉开动画 */
}
.box:hover input[type=text] {
width: 300px;
padding-left: 20px;
}
input[type=submit] {
background-image: url(搜索.png);
background-size: 70px;
background-position: center;
width: 70px;
height: 70px;
float: right;
border-radius: 35px;
border: none;
outline: none;
background-color: #2F3640;
transition: all 0.5s;
}
.box:hover input[type=submit] {
background-color: white;
}
</style>
</head>
<body>
<!-- 提交表单 -->
<form action="https://www.baidu.com/s" method="get">
<div class="box">
<input type="text" placeholder="How to..." name="wd">
<input type="submit" value="">
</div>
</form>
</body>
</html>
标签：70px,
color,
50%,
height,
案例,
搜索,
background,
动态,
border
From： https://www.cnblogs.com/duan-rui/p/16945525.html