Material Design 是 Google 推出的一种全新的 UI 设计风格，深受开发者和设计师的喜爱。其中，浮动标签效果是 Material Design 中一个很重要的特点，它可以给用户带来更好的交互体验。本文将为大家介绍 Material Design 中的浮动标签效果及制作教程。
什么是浮动标签效果
浮动标签，即 Floating Label，在输入框中显示一个浮动的标签，用户在输入内容时，标签会逐渐移动到输入框的顶部，为用户提供更好的输入体验。这种效果不仅可以美化页面，还可以提高用户对于输入框的使用体验。
制作浮动标签
现在，我们来实现一个简单的浮动标签效果。
首先，我们需要 HTML 和 CSS 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- -------------
----- ---------------- --------------------------
-------
------
---- -------------------
------ ---------- -------------------------------
------ ----------- --------- ------------- ---------
------
-------
--------- -------------------- ---- ------- - - ------- -- -------- -- ----------- ----------- - ----------- - --------- --------- ----------- ----- - ------ - ---------- ----- -------- ----- ------ ----- ------- ----- -------------- --- ----- ----- -------- ----- - -- ------ -- ----------- - --------- --------- ---- ----- ----- ----- ----------- --- ---- --------- -------- --- - -- ---- -- ------------ - ------------ ------------ - ----------- - ---- ------ ---------- ----- ------ -------- -
以上代码会实现以下的效果：
总结
浮动标签效果是 Material Design 中一个非常重要的特点，它可以提高用户输入的体验。实现浮动标签也非常简单，只需要添加一些 CSS 样式即可。如果你正在进行 Web 应用的前端设计工作，那么学习浮动标签效果是很有帮助的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c48ec968c7c53b0e975de