FAB（Floating Action Button）是 Material Design 中一个重要的组件，通常用于呈现应用中最重要的操作。在实现一个优秀的 FAB 按钮时，我们需要考虑到其动画效果、大小、阴影以及交互行为等多个方面，以确保最终效果符合设计标准。在本篇文章中，我将详细介绍如何实现 Material Design 中的 FAB 按钮，希望能够为前端开发者提供有价值的指导。
基础 HTML 结构
在开始编写代码之前，首先需要确定 FAB 按钮的基础 HTML 结构。根据 Material Design 的规范，FAB 按钮应该包含一个圆形的主体，一个水波纹效果和一个标志性的图标。因此，我们的基础 HTML 结构应该如下所示：
<button class="fab"> <i class="material-icons">add</i> <span class="ripple"></span> </button>
其中，.fab 类用于定义 FAB 按钮的基本样式，.material-icons 类用于定义图标样式，.ripple 类用于定义水波纹效果。
CSS 样式
接下来，我们需要为 FAB 按钮定义一些基本样式。以下是一个可以供参考的示例：
-- -------------------- ---- -------
---- -
--------- ------
------- -----
------ -----
------ -----
------- -----
----------------- --------
-------------- ----
----------- --- --- ---- ------- -- -- -----
------ ------
------- --------
----------- --- ---- -----
-
---------- -
----------------- --------
-
----------- -
----------------- --------
----------- --- --- --- ------- -- -- -----
-
--------------- -
---------- -----
------------ -----
--------------- -------
------------ -----
-
------- -
--------- ---------
-------------- ----
----------------- --------- ---- ---- -----
---------- ---------
---------- ----------- ---- -------
-
---------- ----------- -
-- -
---------- ---------
-------- --
-
-如上所示，我们定义了 FAB 按钮的基本样式，包括位置、大小、背景色、圆角、阴影等。此外，我们还为 FAB 按钮添加了悬停和点击效果，以及图标和水波纹效果等元素。需要注意的是，我们用 @keyframes 关键字定义了一个水波纹动画效果，以提升用户交互体验。
JS 脚本
为了实现水波纹效果，我们需要编写一些 JavaScript 代码。以下是一个可供参考的示例：
-- -------------------- ---- -------
--- --------
------------------------------------------------ -- -
-------------------------------- - -- -
----------------------
---------------------------------------------------------
--- ------ - --------------------------------
--- -------- - ---------------------------- ---------------------
--- ------ - -------- - --
------------------ - ----------------
------------------- - ----------------
----------------- - ------------ - ----------------- - -----------
---------------- - ------------ - ---------------- - -----------
-----------------------------
------- - ------------- -- -
--------------------------------
-- -----
---
---如上所示，我们首先使用 querySelectorAll 方法选择了所有 .fab 元素，并为它们绑定了 click 事件。当点击 FAB 按钮时，我们会创建一个新的水波纹元素，并计算水波纹的直径和半径。接着，我们便可以根据点击事件的位置，动态地计算出水波纹应该出现的位置和大小。最后，我们还为水波纹添加了一个定时器，以便在 700ms 后将其隐藏。
总结
本文详细介绍了如何实现 Material Design 中的 FAB 按钮，包括 HTML 结构、CSS 样式和 JS 脚本。通过这篇文章的学习，我们可以了解到 FAB 按钮的基本原理和实现方式，并通过示例代码进行实践操作。希望这篇文章能够为前端开发者提供有价值的参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6538c43c7d4982a6eb1cbac3