穿越界限：利用 CSS 实现 Material Design 灵感迸发的输入框动画

2023-11-18 14:43:19

前言

在现代网络世界中，网站和应用程序的界面设计变得愈发重要。一个精心设计的用户界面（UI）可以提升用户体验，使他们更容易与网站或应用程序进行交互。作为 UI 设计中的重要元素之一，输入框不仅是用户输入信息的窗口，更是点缀界面、提升用户体验的利器。

近几年，Material Design 作为一种流行的设计语言，因其简洁、美观、一致性的特点而备受青睐。Material Design 强调使用大胆的排版、鲜艳的色彩和有形的阴影来创建层次分明且具有视觉吸引力的界面。而输入框作为 Material Design 中常见的交互元素，自然也受到了设计者们的广泛关注。

Material Design 风格的输入框往往具有以下特点：

浮动标签： 当输入框获得焦点时，标签会向上浮动，以突出输入框并提示用户正在输入的内容。
边框动画： 输入框在获得焦点时，边框会发生动画变化，以吸引用户的注意力并增强交互感。
填充效果： 输入框在获得焦点时，内部的填充色会发生变化，以进一步突出输入框并提示用户正在输入的内容。

这些设计元素的结合使 Material Design 风格的输入框更加美观、易用，并能为用户带来愉悦的交互体验。

实现 Material Design 风格的输入框动画

在这一部分，我们将逐步讲解如何使用纯 CSS 实现 Material Design 风格的输入框动画。我们将使用 HTML 和 CSS 来构建一个简单的表单，其中包含一个带有浮动标签、边框动画和填充效果的输入框。

首先，让我们创建一个基本的 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password">
    <br>
    <input type="submit" value="登录">
  </form>
</body>
</html>

接下来，让我们添加一些 CSS 样式来实现 Material Design 风格的输入框动画：

/* 浮动标签样式 */
.input-label {
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.2s ease-in-out;
}

/* 输入框获得焦点时的浮动标签样式 */
.input-label.active {
  top: -14px;
  font-size: 12px;
}

/* 输入框样式 */
.input-field {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: 0.2s ease-in-out;
}

/* 输入框获得焦点时的样式 */
.input-field:focus {
  border-color: #009688;
  box-shadow: 0 0 5px #009688;
}

/* 输入框填充样式 */
.input-field::-webkit-input-placeholder {
  color: #999;
}

/* 输入框获得焦点时的填充样式 */
.input-field:focus::-webkit-input-placeholder {
  color: #ccc;
}