网站设计搜索框动态效果
时间: 2023-09-22 14:12:16 浏览: 37
搜索框动态效果可以通过CSS和JavaScript来实现。以下是一个简单的示例:
HTML代码:
```
<form>
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
```
CSS代码:
```
form {
position: relative;
display: inline-block;
}
input[type="text"] {
width: 150px;
height: 30px;
border: none;
border-bottom: 2px solid #ccc;
font-size: 16px;
padding: 5px;
transition: all 0.3s;
}
input[type="text"]:focus {
border-bottom: 2px solid #666;
}
button[type="submit"] {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
background-color: transparent;
border: none;
cursor: pointer;
transition: all 0.3s;
}
button[type="submit"]:hover {
transform: scale(1.2);
}
```
JavaScript代码:
```
document.querySelector("form").addEventListener("submit", function(event) {
event.preventDefault();
let query = document.querySelector("input[type='text']").value;
alert("Search for: " + query);
});
```
这个示例中,搜索框具有以下特性:
- 当用户在输入框中输入内容时,底部边框会变成深灰色;
- 当用户把鼠标悬停在搜索按钮上时,按钮会放大;
- 当用户提交搜索表单时,会弹出一个警告框,显示搜索的内容。
你可以根据自己的需求来修改这个示例,添加更多的功能和动态效果。