动态表单设计：浮动标签输入框（带波纹点击效果）-CSDN博客

本文链接：https://blog.csdn.net/2301_76277481/article/details/147706033

一、引言

在现代网页设计中，表单是用户与网站进行交互的重要组成部分。一个设计精良的表单不仅能提升用户体验，还能增强网站的视觉吸引力。传统的表单输入框往往较为单调，而浮动标签输入框（Floating Label Input）和波纹点击效果（Ripple Effect）的结合，为表单设计带来了全新的动态体验。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 实现一个带有浮动标签和波纹点击效果的输入框。

二、实现思路

要实现浮动标签输入框并添加波纹点击效果，我们可以将整个过程分为以下几个步骤：

HTML 结构搭建：创建基本的 HTML 元素，包括输入框和标签。
CSS 样式设计：为输入框和标签添加样式，实现浮动标签效果和波纹点击效果的基础样式。
JavaScript 交互逻辑：监听输入框的输入事件和点击事件，实现浮动标签的动态显示和波纹效果的触发。

三、代码实现

3.1 HTML 结构搭建

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动标签输入框（带波纹点击效果）</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="input-container">
        <input type="text" id="input-field" required>
        <label for="input-field">用户名</label>
        <span class="ripple"></span>
    </div>
    <script src="script.js"></script>
</body>

</html>

在这段 HTML 代码中，我们创建了一个 div 元素，类名为 input-container，作为输入框和标签的容器。在容器内部，包含一个 input 元素用于用户输入，一个 label 元素作为输入框的标签，以及一个 span 元素，类名为 ripple，用于实现波纹点击效果。

3.2 CSS 样式设计

/* 全局样式 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.input-container {
    position: relative;
    margin: 20px;
}

input {
    padding: 15px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

input:focus {
    outline: none;
    border-color: #007BFF;
}

label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #777;
    pointer-events: none;
    transition: all 0.3s ease;
}

input:focus + label,
input:valid + label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #007BFF;
    background-color: #f4f4f9;
    padding: 0 5px;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0, 123, 255, 0.3);
    transform: scale(0);
    animation: rippleEffect 0.6s linear;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

代码解释

全局样式：将 body 元素设置为使用 Flexbox 布局，使输入框在页面中垂直和水平居中显示，同时设置背景颜色和字体。
输入框容器样式：input-container 类设置为相对定位，为内部元素的绝对定位提供参考。
输入框样式：input 元素设置了内边距、宽度、边框、圆角和字体大小，同时添加了过渡效果，当输入框获得焦点时，改变边框颜色。
标签样式：label 元素初始位置在输入框内部，通过绝对定位实现。当输入框获得焦点或输入内容有效时，使用 input:focus + label 和 input:valid + label 选择器，将标签向上移动并缩小字体，实现浮动标签效果。
波纹效果样式：ripple 类设置了波纹的初始样式，通过 transform: scale(0) 隐藏波纹。@keyframes rippleEffect 定义了波纹的动画效果，使其从初始大小逐渐放大并逐渐透明。

3.3 JavaScript 交互逻辑

const inputField = document.getElementById('input-field');
const ripple = document.querySelector('.ripple');

inputField.addEventListener('focus', function () {
    if (this.value === '') {
        this.nextElementSibling.style.color = '#007BFF';
    }
});

inputField.addEventListener('blur', function () {
    if (this.value === '') {
        this.nextElementSibling.style.color = '#777';
    }
});

inputField.addEventListener('mousedown', function (e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    ripple.style.transform = 'scale(0)';

    setTimeout(() => {
        ripple.style.transform = 'scale(4)';
    }, 0);
});

代码解释

获取元素：通过 document.getElementById 和 document.querySelector 方法获取输入框和波纹元素。
焦点事件处理：监听输入框的 focus 和 blur 事件，当输入框获得焦点且内容为空时，改变标签颜色；当输入框失去焦点且内容为空时，恢复标签颜色。
点击事件处理：监听输入框的 mousedown 事件，计算点击位置相对于输入框的坐标，设置波纹的初始位置和大小。通过 setTimeout 函数触发波纹的动画效果。

四、完整代码

HTML 代码（index.html）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动标签输入框（带波纹点击效果）</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="input-container">
        <input type="text" id="input-field" required>
        <label for="input-field">用户名</label>
        <span class="ripple"></span>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS 代码（styles.css）

/* 全局样式 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.input-container {
    position: relative;
    margin: 20px;
}

input {
    padding: 15px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

input:focus {
    outline: none;
    border-color: #007BFF;
}

label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #777;
    pointer-events: none;
    transition: all 0.3s ease;
}

input:focus + label,
input:valid + label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #007BFF;
    background-color: #f4f4f9;
    padding: 0 5px;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0, 123, 255, 0.3);
    transform: scale(0);
    animation: rippleEffect 0.6s linear;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

JavaScript 代码（script.js）

const inputField = document.getElementById('input-field');
const ripple = document.querySelector('.ripple');

inputField.addEventListener('focus', function () {
    if (this.value === '') {
        this.nextElementSibling.style.color = '#007BFF';
    }
});

inputField.addEventListener('blur', function () {
    if (this.value === '') {
        this.nextElementSibling.style.color = '#777';
    }
});

inputField.addEventListener('mousedown', function (e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    ripple.style.transform = 'scale(0)';

    setTimeout(() => {
        ripple.style.transform = 'scale(4)';
    }, 0);
});

五、总结

通过结合 HTML、CSS 和 JavaScript，我们成功实现了一个带有浮动标签和波纹点击效果的输入框。这个动态表单设计不仅提升了用户体验，还为网页增添了现代感和交互性。你可以根据自己的需求对代码进行修改和扩展，例如改变颜色、调整动画速度等，以适应不同的设计风格。希望本文能为你的表单设计提供一些灵感和帮助！

将上述代码分别保存为 index.html、styles.css 和 script.js 文件，确保它们在同一目录下，然后在浏览器中打开 index.html 文件，即可看到浮动标签输入框（带波纹点击效果）的效果。