在现代 Web 开发中，Material Design 已经成为了前端设计的主要趋势。其中，FloatingActionButton（FAB）是一种非常常见的按钮样式，它的特点是悬浮在屏幕的某个位置，通常用于触发主要操作。本文将介绍如何使用 CSS3 实现 FAB 中图标的旋转效果，以及如何在实际项目中应用。
实现思路
我们需要实现的效果是，当用户点击 FAB 按钮时，其中的图标应该旋转一定角度。为了实现这个效果，我们可以通过以下步骤进行：
- 使用一个 div 元素作为 FAB 的容器，其中包含一个 i 元素作为图标。
- 通过 CSS3 的 transition 属性和 transform 属性，为 i 元素添加旋转效果。
- 使用 JavaScript 监听 FAB 的点击事件，当用户点击时，为 i 元素添加旋转效果。
实现代码
首先，我们需要在 HTML 中添加 FAB 的代码：
<div class="fab"> <i class="material-icons">add</i> </div>
其中，.fab 是 FAB 容器的类名，.material-icons 是 Material Design 的图标字体库，add 是图标的名称。
接下来，我们为 .fab 和 .material-icons 添加样式：
// javascriptcn.com 代码示例
.fab {
position: fixed;
right: 24px;
bottom: 24px;
width: 56px;
height: 56px;
border-radius: 28px;
background-color: #2196F3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 0.2s;
}
.fab:hover {
background-color: #1976D2;
}
.material-icons {
font-size: 24px;
color: white;
transition: transform 0.2s;
}其中，我们为 .fab 设置了基本样式，包括大小、圆角、背景色、阴影和光标样式。同时，我们也为 .material-icons 设置了基本样式，包括字体大小和颜色。注意到我们在 .material-icons 中添加了 transition: transform 0.2s;，这是为了为图标添加旋转效果做准备。
接下来，我们需要添加 JavaScript 代码，监听 FAB 的点击事件，并为图标添加旋转效果：
var fab = document.querySelector('.fab');
var icon = document.querySelector('.material-icons');
fab.addEventListener('click', function() {
icon.classList.toggle('rotate');
});其中，我们使用 document.querySelector 方法获取 FAB 和图标元素，并使用 addEventListener 方法监听 FAB 的点击事件。当用户点击 FAB 时，我们使用 classList.toggle 方法为图标添加或移除 rotate 类名，从而触发旋转效果。
最后，我们需要为 .material-icons.rotate 添加样式，实现图标的旋转效果：
.material-icons.rotate {
transform: rotate(45deg);
}其中，我们使用 transform: rotate(45deg); 将图标旋转 45 度。
应用示例
我们可以将上述代码应用于一个实际项目中。例如，下面是一个简单的 To-Do List 应用，其中 FAB 用于添加新的任务：
我们可以通过点击 FAB，触发图标的旋转效果，让用户更加直观地感受到操作的反馈。
总结
本文介绍了如何使用 CSS3 和 JavaScript 实现 Material Design FAB 中图标的旋转效果。通过本文的学习，我们不仅可以了解到如何实现这个效果，还可以将其应用于实际项目中，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656144cdd2f5e1655db58be2