如何在 Material Design 中实现点击后元素背景颜色改变的效果
Material Design 是一种由 Google 设计的现代化 UI 设计语言，它以响应式设计、阴影、纸张以及打破常规的颜色使用为特点。在 Material Design 中，元素之间的交互和动画效果也是非常重要的，其中点击后元素背景颜色改变的效果是一个很常见的交互动画。在本文中，我们将详细介绍如何在 Material Design 中实现这个效果。
准备工作
在开始前，我们需要准备以下工作：
一个可供使用的代码编辑器，如 VS Code。
一个基础的 HTML 页面，其中包含我们需要应用效果的元素。
Material Design 的 CSS 库，可以从 Google 官网下载。
一些基本的 CSS 知识，我们需要通过修改样式来实现点击后元素背景颜色改变的效果。
实现步骤
- 引入 Material Design 的 CSS 库。
在 HTML 页面的 head 标签中引入 Material Design 的 CSS 库，可以使用以下代码：
<link rel="stylesheet" href="path/to/material_design.css">
- 编写 HTML 代码。
在 body 标签中编写 HTML 代码，如下所示：
<div class="md-card"> <h2>Card Title</h2> <p>Card Content</p> </div>
在这个例子中，我们创建了一个 MD 卡片，并添加了卡片标题和内容。我们希望在点击卡片时，卡片的背景颜色发生改变。
- 给元素添加 class 属性。
为了添加点击后的背景色，我们需要先添加一个 class 属性到元素上。在本例中，我们将添加一个名为 "md-clickable" 的 class。
<div class="md-card md-clickable"> <h2>Card Title</h2> <p>Card Content</p> </div>
- 编写 CSS 代码。
现在，我们需要使用 CSS 来实现点击后元素背景颜色改变的效果。我们将首先创建一个未点击时的样式。
.md-clickable {
background-color: #fff;
transition: background-color 0.2s ease-out;
}在这个样式中，我们设置了背景颜色为 #fff，同时指定了一个过渡效果，过渡时间为 0.2 秒。
接下来，我们需要为点击后的效果创建另一个样式。这个样式将覆盖前一个样式，并将卡片的背景颜色更改为我们选择的颜色。
.md-clickable:active {
background-color: #ccc;
transition: background-color 0.2s ease-in;
}在这个样式中，我们将背景颜色更改为 #ccc，并且指定了另一个过渡效果，过渡时间仍为 0.2 秒，但是过渡类型为 ease-in。这样做的原因是让过渡效果更加平滑，在点击后立即启动。
现在，当用户点击卡片时，卡片的背景颜色会从白色变为灰色，并伴随着平滑的过渡效果。
总结
在本文中，我们详细介绍了如何在 Material Design 中实现点击后元素背景颜色改变的效果。为了实现这个效果，我们需要添加一个名为 "md-clickable" 的 class 到元素上，并使用 CSS 来创建未点击和点击后的样式。这个效果可以为我们的应用程序增加一些动态性和交互性，帮助我们提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a7b827d4982a6ebcce356