代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#searchbox {
background-color: rgba(0, 0, 0, .35);
}
#searchbox:hover {
background-color: rgba(15, 15, 15, .6);
}
.search {
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
max-width: 80%;
width: 230px;
height: 43px;
border-radius: 30px;
color: #fff;
background-color: rgba(255, 255, 255, .25);
box-shadow: rgb(0 0 0 / 20%) 0 0 10px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
overflow: hidden;
transition: color .25s, background-color .25s, box-shadow .25s, left .25s, opacity .25s, top .25s, width .25s;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: black;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: black;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: black;
}
.search:hover {
box-shadow: rgb(0 0 0 / 30%) 0 0 10px;
width: 530px;
}
input {
outline: 0;
border: none;
width: 100%;
height: 100%;
color: inherit;
background-color: transparent;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<div class="search" id="searchbox">
<input id="search" autocomplete="off" type="text" class="search-input" placeholder="Search">
</div>
</body>
<script>
var search = document.querySelector('.search');
var input = document.querySelector("input");
var click = 0; // 0未点击 1点击
input.onclick = function () {
input.setAttribute('placeholder', ''); // 清空提示词
search.style.width = '530px'; // 搜索框被点击放大效果
click = 1;
}
input.onblur = function () {
input.setAttribute('placeholder', 'Search'); // 还原提示词
search.style.width = '230px';
input.value = ''; // 失去焦点清空搜索内容
click = 0;
}
search.onmouseover = function () {
search.style.width = '530px'; // 鼠标经过放大效果
}
search.onmouseout = function () {
if (click == 0) {
search.style.width = '230px'; // 未点击
} else {
search.style.width = '530px'; // 被点击
}
}
</script>
</html>效果如下：
