在现代化的移动应用中，加入 Material Design 的风格是非常流行的。而其中一个常用的元素就是浮动按钮（FloatingActionButton，以下简称FAB）。FAB 是一个带有圆形的圆形图标，可以随意悬浮在界面之上，并且随着用户的操作，在不同的位置上展现出不同的效果。
在本篇文章中，我们将探讨如何实现 Material Design 中的 FAB 效果，并详细介绍其实现方法和技巧。同时，我们也会提供实例代码和实用的指导建议，帮助你轻松地进行实现。
FAB 的基本特点与实现方法
在开始之前，让我们来先了解 FAB 的基本特点：
- FAB 的形状为圆形，可以设置不同大小、颜色、阴影等属性；
- FAB 能够随意悬浮在界面之上，并且与其他 UI 元素重叠；
- FAB 所处位置的不同会影响其展示效果，如滚动到页面底部时，FAB 会自动靠近屏幕底部，并改变形状。
那么，在实现 FAB 时，需要考虑到这些特点。下面，我们将分别介绍如何实现 FAB 的圆形形状、阴影和显示效果。
FAB 的圆形形状
实现 FAB 的圆形形状主要有两个方面需要考虑：一是设置 FAB 的 border-radius，二是将 FAB 的宽高比设置为 1:1。
在 CSS 中，我们可以通过设置 border-radius 来让元素变成圆形，而将 FAB 的宽高比设置为 1:1 可以让其成为一个正方形。以下是实现 FAB 圆形形状的代码：
-- -------------------- ---- -------
------- ----------------------
---- -
----------------- --------
------ -----
---------- -----
------------ -----
------ -----
------- -----
-------------- ----- -----------
-------- ------
------- - -----
------- -----
----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------ --------
-FAB 的阴影效果
在 Material Design 风格中，阴影是非常重要的指示元素，可以让元素看起来更有层次感，并且更加突出。
在实现 FAB 的阴影效果时，我们可以使用 box-shadow 属性。它允许我们添加一个或多个阴影效果。以下是实现 FAB 阴影效果的代码：
-- -------------------- ---- -------
------- ----------------------
---- -
----------------- --------
------ -----
---------- -----
------------ -----
------ -----
------- -----
-------------- -----
-------- ------
------- - -----
------- -----
----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------ --------
-FAB 的显示效果
在 Material Design 风格中，FAB 的显示效果是非常重要的指示元素。根据其不同的显示效果，可以让 FAB 看起来更加突出、更加完美地融入到整个应用中。接下来，我们将分别介绍 FAB 的静态和滚动两种不同的显示效果。
静态效果
FAB 的静态效果是指 FAB 在屏幕中是不动的，常常位于应用的较为正中央。
-- -------------------- ---- -------
---- ------------------
------- ----------------------
------
---------- -
------ -----
------- -----
-------- -----
---------------- -------
------------ -------
-
---- -
----------------- --------
------ -----
---------- -----
------------ -----
------ -----
------- -----
-------------- -----
-------- ------
------- - -----
------- -----
----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------
-滚动效果
FAB 的滚动效果是指当页面向下滚动到一定位置时，FAB 将自动移动到页面底部。这时，FAB 的形状也会随之发生改变。
-- -------------------- ---- -------
---- ------------------
------- ----------------------
------
---------- -
------ -----
------- -----
-------- -----
--------------- -------
---------------- -------
------------ -------
-
---- -
----------------- --------
------ -----
---------- -----
------------ -----
------ ----- ---------
------- -----
-------------- ---- --------
-------- ------
------- - -----
------- -----
----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------
--------- ------ ------------
------- ----- -------------
------ ----- -------------
-
----------- - -------------
----------- --- ---- ---------
---------- ---------------- -- -----------
-总结
在本篇文章中，我们学习了如何实现 Material Design 中的 FAB 按钮效果。我们探讨了 FAB 的基本特点，以及实现 FAB 的圆形形状、阴影效果和不同的显示效果的方法。
通过以上的实例和分析，我们可以看到要实现一个满足 Material Design 风格的 FAB，需要考虑很多方面，包括 FAB 的形状、阴影效果、位置等。学习这些技巧，可以让我们更好地完成前端 UI 开发工作。
完整代码如下：
-- -------------------- ---- -------
------
------
-------
------ -
----------------- --------
------ -----
---------- -----
------------ -----
------ -----
------- -----
-------------- -----
-------- ------
------- - -----
------- -----
----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------
-
---------- -
------ -----
------- -----
-------- -----
---------------- -------
------------ -------
-
---- -
----------------- --------
------ -----
---------- -----
------------ -----
------ -----
------- -----
-------------- -----
-------- ------
------- - -----
------- -----
----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------
-
----------- -
----------- --- ---- ---------
---------- ---------------- -- -----------
------ -----
------- -----
-------------- ----
----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------
--------- ------
------- -----
------ -----
-
--------
-------
------
---- ------------------
------------------
------- ----------------------
------
-------
--------
--- --- - -------------------------------
--------------------------------- ---------- -
-- --------------- - ---- -
----------------------------
- ---- -
-------------------------------
-
---
---------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b0e03968c7c53b06a03df