数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚设计
法学如何使用 CSS 创建一个动画搜索表单？
如今，许多网站都在主页上内置了一个动画搜索框。当将鼠标光标移到搜索框内时，搜索框的宽度变大，从而使用户更容易进行搜索。让我们了解如何使用 HTML 和 CSS 创建这种动画搜索表单。
创建搜索表单
使用 <form>元素，并在其中放置输入类型文本。别忘了为用户添加一个适合的占位符，以便用户了解文本框的用途−
<form> Search: <input type="text" name="search" placeholder="Search Here..."> </form>
给搜索框添加样式
搜索框样式如下。此外，还使用 width 属性上的 transition 属性设置过渡。过渡时间功能设置为 ease-in-out，即开始和结束较慢的过渡−
input[type=text] {
width: 170px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
给搜索表单添加动画
使用 :focus 选择器，在设置焦点时，宽度将变为 100%。:focus 选择器选择拥有焦点的元素−
input[type=text]:focus {
width: 100%;
}
示例
以下代码使用 CSS 创建了一个动画搜索表单−
<!DOCTYPE html>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
input[type=text] {
width: 170px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<h1>Animated search form example</p>
<form>
Search:
<input type="text" name="search" placeholder="Search Here...">
</form>
</body>
</html>
更新于： 2023-12-14
209 次浏览
广告