自己写一个新标签页,实现百度搜索
- 实现模糊动图背景
- 内容不模糊
- 搜索框实现百度搜索
- 修改 icon
背景使用 filter 实现模糊,搜索调用百度接口
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="./imgs/favicon.ico" />
<title>新建标签页</title>
</head>
<body>
<div class="bg">
<div class="content">
<form id="bdfm" target="_blank" name="bdfm" method="get" action="http://www.baidu.com/s">
<input type="text" class="search" id="search1" name="word" autocomplete="off" placeholder="百度搜索" />
</form>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.bg {
width: 100%;
height: 100%;
position: relative;
background: url("./imgs/bg.gif") no-repeat center;
background-size: cover;
z-index: 1;
transform: scale(1.2);
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: inherit;
filter: blur(10px);
z-index: 2;
}
.content {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 3;
}
.search {
width: 400px;
height: 35px;
border: none;
border-radius: 8px;
outline: 0;
background: rgba(225, 225, 225, 0.2);
color: #555666;
text-align: center;
}
.search:focus {
background: rgba(225, 225, 225, 1);
}
</style>
</html>
运行结果