使用 JavaScript 实现优酷风格的漂亮搜索框效果
在前端开发中,搜索框是一个常见的组件,而优美的搜索框可以提升用户体验。本文将介绍如何使用 JavaScript 实现优酷风格的漂亮搜索框效果,并提供详细的示例代码和指导意义。
效果展示
首先,让我们来看一下最终实现的效果:
可以看到,在输入文字后,搜索框底部会出现一条动态的线条,同时搜索按钮也会变成红色。这种效果不仅美观,而且给人一种非常流畅的交互体验。
实现步骤
接下来,我们将详细介绍如何使用 JavaScript 实现这种效果。
1. HTML 结构
首先,我们需要在 HTML 中添加搜索框和搜索按钮的结构。具体代码如下:
---- ------------------- ------ ----------- ------------------------ ------- ----------------------------- ----- -------------------- ------
可以看到,我们使用了一个 div
元素作为搜索框的容器,并在其中添加了一个 input
元素、一个 button
元素和一个 span
元素。其中,input
元素用于输入搜索内容,button
元素用于触发搜索操作,而 span
元素则用于显示动态的线条。
2. CSS 样式
接下来,我们需要对搜索框进行样式设计。具体代码如下:
----------- - --------- --------- ------ ------ ------- ----- ------- - ----- - ------------------ - ------ ----- ------- ----- -------- ----- ---------- ----- ------- ----- -------------- --- ----- ----- -------- ----- - --------------------- - --------- --------- ---- -- ------ -- ------ ----- ------- ----- ---------- ----- ------ ------ ----------------- ----- ------- ----- -------- ----- ------- -------- ----------- ---------------- ---- ------------ - --------------------------- - ----------------- ---- - ----- - --------- --------- ------- -- ----- -- ------- ---- ------ -- ----------------- ---- ----------- ----- ---- ------------ -
可以看到,我们对搜索框容器设置了宽度、高度和居中样式,并对输入框、按钮和线条分别进行了样式设计。
其中,输入框使用了无边框样式和带底部边框的样式,并在输入框获得焦点时去掉了默认的外边框。
按钮使用了绝对定位样式,并在鼠标悬停时改变背景色。同时,我们还添加了一个过渡效果,使颜色变化更加流畅。
线条使用了绝对定位样式和宽度为0的样式,并在输入框获得焦点时添加了一个过渡效果,使线条宽度逐渐变大。
3. JavaScript 动画效果
最后,我们需要使用 JavaScript 实现动画效果。具体代码如下:
----- ------- - ----------------------------------- -------- ----- ------ - ----------------------------------- -------- ----- -------- - ----------------------------------- --------- --------------------------------- ---------- - ------------------ - ------- ------------------------------ - ------ --- -------------------------------- ---------- - ------------ ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------