自己写一个新标签页，实现百度搜索

最新推荐文章于 2024-07-01 17:18:08 发布

Arrowszc

最新推荐文章于 2024-07-01 17:18:08 发布

阅读量474

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/sangzican/article/details/110408699

版权

自己写一个新标签页，实现百度搜索

实现模糊动图背景
内容不模糊
搜索框实现百度搜索
修改 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>

运行结果

在这里插入图片描述

Arrowszc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
自己写一个新标签页，实现百度搜索

自己写一个新标签页，实现百度搜索实现模糊动图背景内容不模糊搜索框实现百度搜索修改 icon背景使用 filter 实现模糊，搜索调用百度接口<html> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="./imgs/favicon.ico" /> <title>新建标签页</title> </head>
复制链接

扫一扫