使用原生 JavaScript 实现 Material Design 的各种效果-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一种设计语言，它的特点是扁平化、卡片化和阴影效果，可以提供一种现代化的界面风格，让用户体验更加流畅舒适。在前端开发中，我们可以使用原生 JavaScript 实现 Material Design 的各种效果，让我们的网站更加美观、易用。

1. 按钮效果

Material Design 的按钮效果是非常独特的，它包括了波纹效果和阴影效果。我们可以通过以下代码实现：

<button class="md-button">Click Me</button>

// javascriptcn.com 代码示例
.md-button {
  display: inline-block;
  position: relative;
  padding: 12px 24px;
  background-color: #2196f3;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}

.md-button:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.md-button:hover:after {
  width: 200%;
  height: 200%;
  opacity: 1;
  transition: all 0.3s ease;
}

.md-button:focus {
  outline: none;
}

.md-button:focus:after {
  width: 200%;
  height: 200%;
  opacity: 0;
  transition: all 0.3s ease;
}

.md-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

2. 卡片效果

Material Design 的卡片效果可以让我们的内容更加突出，让用户更容易理解和使用。我们可以通过以下代码实现：

<div class="md-card">
  <div class="md-card-header">
    <h2 class="md-card-title">Card Title</h2>
  </div>
  <div class="md-card-body">
    <p>Card Content</p>
  </div>
</div>

// javascriptcn.com 代码示例
.md-card {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.md-card-header {
  padding: 16px;
  background-color: #2196f3;
  color: #fff;
}

.md-card-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.md-card-body {
  padding: 16px;
}

3. 文本框效果

Material Design 的文本框效果可以让用户更容易输入内容，并提供一种现代化的界面风格。我们可以通过以下代码实现：

<div class="md-textfield">
  <input class="md-input" type="text" id="username" required>
  <label class="md-label" for="username">Username</label>
  <span class="md-bar"></span>
</div>

// javascriptcn.com 代码示例
.md-textfield {
  position: relative;
  margin-bottom: 24px;
}

.md-input {
  width: 100%;
  padding: 16px 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 16px;
  background-color: transparent;
}

.md-input:focus {
  outline: none;
  border-bottom: 2px solid #2196f3;
}

.md-label {
  position: absolute;
  top: 16px;
  left: 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.54);
  pointer-events: none;
  transition: all 0.3s ease;
}

.md-input:focus ~ .md-label,
.md-input:not(:placeholder-shown) ~ .md-label {
  top: 0;
  font-size: 12px;
  color: #2196f3;
}

.md-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.md-input:focus ~ .md-bar {
  background-color: #2196f3;
}

4. 下拉菜单效果

Material Design 的下拉菜单效果可以让用户更容易选择内容，并提供一种现代化的界面风格。我们可以通过以下代码实现：

// javascriptcn.com 代码示例
<div class="md-dropdown">
  <div class="md-dropdown-header">
    <span class="md-dropdown-title">Dropdown Title</span>
    <i class="material-icons md-dropdown-icon">arrow_drop_down</i>
  </div>
  <div class="md-dropdown-menu">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

// javascriptcn.com 代码示例
.md-dropdown {
  position: relative;
  display: inline-block;
}

.md-dropdown-header {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  background-color: #2196f3;
  color: #fff;
  cursor: pointer;
}

.md-dropdown-title {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
}

.md-dropdown-icon {
  font-size: 24px;
}

.md-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: none;
  min-width: 160px;
  padding: 8px 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.md-dropdown-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-dropdown-menu li {
  padding: 8px 24px;
  cursor: pointer;
}

.md-dropdown:hover .md-dropdown-menu {
  display: block;
}

5. 折叠面板效果

Material Design 的折叠面板效果可以让用户更容易查看和管理内容，并提供一种现代化的界面风格。我们可以通过以下代码实现：

// javascriptcn.com 代码示例
<div class="md-accordion">
  <div class="md-accordion-item">
    <div class="md-accordion-header">
      <span class="md-accordion-title">Accordion Title 1</span>
      <i class="material-icons md-accordion-icon">keyboard_arrow_down</i>
    </div>
    <div class="md-accordion-content">
      <p>Accordion Content 1</p>
    </div>
  </div>
  <div class="md-accordion-item">
    <div class="md-accordion-header">
      <span class="md-accordion-title">Accordion Title 2</span>
      <i class="material-icons md-accordion-icon">keyboard_arrow_down</i>
    </div>
    <div class="md-accordion-content">
      <p>Accordion Content 2</p>
    </div>
  </div>
</div>

// javascriptcn.com 代码示例
.md-accordion {
  width: 100%;
  border: none;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.md-accordion-item {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.md-accordion-header {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  background-color: #fff;
  cursor: pointer;
}

.md-accordion-title {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
}

.md-accordion-icon {
  font-size: 24px;
}

.md-accordion-content {
  padding: 16px 24px;
  background-color: #f5f5f5;
  display: none;
}

.md-accordion-item.active .md-accordion-content {
  display: block;
}

总结

在本文中，我们介绍了如何使用原生 JavaScript 实现 Material Design 的各种效果，包括按钮效果、卡片效果、文本框效果、下拉菜单效果和折叠面板效果。这些效果可以让我们的网站更加美观、易用，提高用户体验。希望本文对您有所帮助，也欢迎大家分享自己的实现方式和经验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657b2a5cd2f5e1655d5b423b