使用原生 JavaScript 实现 Material Design 的各种效果

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

1. 按钮效果

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

------- ----------------------- -----------
---------- -
  -------- -------------
  --------- ---------
  -------- ---- -----
  ----------------- --------
  ------ -----
  ---------- -----
  ------------ ----
  ----------- -------
  --------------- ----------
  ------- -----
  -------------- ----
  ------- --------
  --------- -------
-

---------------- -
  -------- ---
  -------- ------
  --------- ---------
  ---- ----
  ----- ----
  ------ --
  ------- --
  ----------------- --------- ---- ---- -----
  -------------- ----
  ---------- --------------- ------
  -------- --
-

---------------------- -
  ------ -----
  ------- -----
  -------- --
  ----------- --- ---- -----
-

---------------- -
  -------- -----
-

---------------------- -
  ------ -----
  ------- -----
  -------- --
  ----------- --- ---- -----
-

----------------- -
  ---------- ----------------
  ----------- - --- --- ------- -- -- -----
-

2. 卡片效果

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

---- ----------------
  ---- -----------------------
    --- -------------------------- ----------
  ------
  ---- ---------------------
    ------- -----------
  ------
------
-------- -
  ----------------- -----
  -------------- ----
  ----------- - --- --- ------- -- -- -----
  --------- -------
-

--------------- -
  -------- -----
  ----------------- --------
  ------ -----
-

-------------- -
  ------- --
  ---------- -----
  ------------ ----
-

------------- -
  -------- -----
-

3. 文本框效果

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

---- ---------------------
  ------ ---------------- ----------- ------------- ---------
  ------ ---------------- -------------------------------
  ----- ----------------------
------
------------- -
  --------- ---------
  -------------- -----
-

--------- -
  ------ -----
  -------- ---- --
  ------- -----
  -------------- --- ----- ------- -- -- ------
  ---------- -----
  ----------------- ------------
-

--------------- -
  -------- -----
  -------------- --- ----- --------
-

--------- -
  --------- ---------
  ---- -----
  ----- --
  ---------- -----
  ------ ------- -- -- ------
  --------------- -----
  ----------- --- ---- -----
-

--------------- - ----------
--------------------------------- - --------- -
  ---- --
  ---------- -----
  ------ --------
-

------- -
  --------- ---------
  ------- --
  ----- --
  ------ -----
  ------- ----
  ----------------- ------- -- -- ------
  --------------- -----
-

--------------- - ------- -
  ----------------- --------
-

4. 下拉菜单效果

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

---- --------------------
  ---- ---------------------------
    ----- ---------------------------------- ------------
    -- --------------------- -------------------------------------
  ------
  ---- -------------------------
    ----
      -------- ------
      -------- ------
      -------- ------
    -----
  ------
------
------------ -
  --------- ---------
  -------- -------------
-

------------------- -
  -------- -----
  ------------ -------
  -------- ---- -----
  ----------------- --------
  ------ -----
  ------- --------
-

------------------ -
  ----- --
  ---------- -----
  ------------ ----
-

----------------- -
  ---------- -----
-

----------------- -
  --------- ---------
  ---- -----
  ----- --
  -------- --
  -------- -----
  ---------- ------
  -------- --- --
  ----------------- -----
  ----------- - --- --- ------- -- -- -----
-

----------------- -- -
  ----------- -----
  ------- --
  -------- --
-

----------------- -- -
  -------- --- -----
  ------- --------
-

------------------ ----------------- -
  -------- ------
-

5. 折叠面板效果

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

---- ---------------------
  ---- --------------------------
    ---- ----------------------------
      ----- ------------------------------------ ----- --------
      -- --------------------- ------------------------------------------
    ------
    ---- -----------------------------
      ------------ ------- -----
    ------
  ------
  ---- --------------------------
    ---- ----------------------------
      ----- ------------------------------------ ----- --------
      -- --------------------- ------------------------------------------
    ------
    ---- -----------------------------
      ------------ ------- -----
    ------
  ------
------
------------- -
  ------ -----
  ------- -----
  -------------- ----
  ----------- - --- --- ------- -- -- -----
  --------- -------
-

------------------ -
  ----------- --- ----- ------- -- -- ------
-

-------------------- -
  -------- -----
  ------------ -------
  -------- ---- -----
  ----------------- -----
  ------- --------
-

------------------- -
  ----- --
  ---------- -----
  ------------ ----
-

------------------ -
  ---------- -----
-

--------------------- -
  -------- ---- -----
  ----------------- --------
  -------- -----
-

------------------------- --------------------- -
  -------- ------
-

总结

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

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657b2a5cd2f5e1655d5b423b

阅读全文

猜你喜欢

  • eslint+vue 开发前端的正确姿势

    前言 随着前端技术的不断发展，现代化的前端开发变得越来越复杂。为了提高代码质量和可维护性，我们需要使用一些工具来辅助我们开发。其中，eslint 是一个非常重要的工具，它可以帮助我们检查代码风格和潜在...

    10 个月前
  • CSS Grid 实现左右两栏自适应布局方法详解

    前言 在前端开发中，实现布局是非常重要的一环。而在布局中，左右两栏自适应布局是一种非常常见的布局方式，尤其是在网站的主页、详情页等场景中。 在过去，实现左右两栏自适应布局主要靠浮动、定位等方式，但这些...

    10 个月前
  • ES9 对模块化编程的支持及其应用

    在前端开发中，模块化编程已经成为了一种常见的编程方式。ES6 的引入让 JavaScript 对模块化编程提供了原生的支持，而 ES9 在此基础上又做出了一些扩展和改进，本文将详细介绍 ES9 对模块...

    10 个月前
  • 渐进式图片渲染技术

    随着互联网的发展，网页中的图片数量和质量越来越高，但是图片的加载速度却成为了影响用户体验的一个重要因素。渐进式图片渲染技术是一种能够在图片加载过程中逐步展示图片内容的优化方法，能够提高用户的感知速度和...

    10 个月前
  • Hapi 的 WebSocket 修改协议版本

    WebSocket 是一种在 Web 应用程序中实现双向通信的协议，它允许客户端和服务器之间进行实时通信。Hapi 是一个 Node.js 的 Web 应用程序框架，它提供了一个强大的 WebSock...

    10 个月前
  • Headless CMS 开源框架的比较： Ghost, Strapi, Contentful

    随着前端技术的发展，Headless CMS 成为了越来越受欢迎的解决方案。Headless CMS 是一种将内容与前端分离的 CMS 系统，它可以为前端开发人员提供 API 接口，以便于他们可以使用...

    10 个月前
  • 如何解决 SPA 打包后的多余 chunk 和资源浪费

    单页面应用（SPA）在开发过程中常常使用打包工具将代码打包成多个 chunk，以便于在浏览器中加载。但是，这样做往往会导致打包后的代码出现多余的 chunk 和资源浪费的情况。

    10 个月前
  • 在 SASS 中如何使用 if/else 条件语句？

    在 SASS 中如何使用 if/else 条件语句？ SASS 是一种 CSS 预处理器，可以让开发者在编写 CSS 时更加高效和灵活。其中一个重要的特性是支持 if/else 条件语句，可以根据不同...

    10 个月前
  • ECMAScript 2020 中如何使用 dynamic import 实现按需加载并发请求

    ECMAScript 2020 中如何使用 dynamic import 实现按需加载并发请求 ECMAScript 2020 是 JavaScript 的最新版本，其中包含了一些新的特性和语法糖，其...

    10 个月前
  • Sequelize 中如何使用注释

    Sequelize 中如何使用注释 Sequelize 是一个 Node.js 的 ORM（对象关系映射）框架，它提供了一种方便的方式来操作数据库。在使用 Sequelize 进行开发时，注释是一项非...

    10 个月前
  • 将 Koa 应用程序部署到 Docker 容器中的指南

    Docker 是一个开源的容器化平台，可以将应用程序和其依赖项打包到一个可移植的容器中，并在不同的环境中部署和运行。在本文中，我们将分享如何将 Koa 应用程序部署到 Docker 容器中的详细指南，...

    10 个月前
  • SSE 客户端实现异步上传文件

    什么是 SSE？ SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，它允许浏览器自动接收来自服务器的更新，而无需通过轮询来获取数据。

    10 个月前
  • Mocha：如何跳过特定的测试用例并运行其他测试用例

    在前端开发中，测试是非常重要的一个环节，它能够帮助我们在开发过程中发现并解决问题，提高代码质量。而 Mocha 是一个流行的 JavaScript 测试框架，它提供了丰富的 API 和插件，使得我们能...

    10 个月前
  • Express.js 中如何使用 Mongoose 连接 MongoDB 数据库

    什么是 Mongoose？ Mongoose 是一个 Node.js 库，它为 MongoDB 提供了一种更高级的抽象层，使得我们能够更容易地在 Node.js 应用程序中使用 MongoDB 数据库...

    10 个月前
  • 关于 ES7 中 Array.of() 方法与 Array() 构造函数的区别

    在 ES7 中，新增了一个 Array.of() 方法，它与 Array() 构造函数非常相似，但是它们之间还是有一些区别的。本文将详细介绍 Array.of() 和 Array() 的区别，以及如何...

    10 个月前
  • Serverless 应用的监控指标及实时报警

    Serverless 架构已经成为了现代应用开发的趋势之一。它可以让开发人员专注于业务逻辑，而无需考虑底层的基础设施和服务器管理。但是，Serverless 应用的监控和报警也是非常重要的，因为它们可...

    10 个月前
  • ECMAScript 2017 中的语言学习路径

    ECMAScript 2017 是 JavaScript 语言的最新版本，它在前端开发中扮演着重要的角色。学习 ECMAScript 2017 可以让我们更好地理解 JavaScript 语言，掌握更...

    10 个月前
  • Babel 常见问题及解决方式汇总

    前言 Babel 是一个 JavaScript 编译器，能够将 ES6+ 代码转换为向后兼容的 JavaScript 代码。在前端开发中，我们经常需要使用 Babel 来进行代码转换，以满足不同浏览器...

    10 个月前
  • Webpack 中使用 ES6 语法的详解

    什么是 Webpack？ Webpack 是一个模块打包工具，它可以将多个模块打包成一个文件，以便于在浏览器端使用。它支持多种模块化规范，包括 CommonJS、AMD、ES6 等。

    10 个月前
  • Node.js 实现聊天室在线人数的更新

    在一个聊天室中，我们通常需要实时更新在线人数，这对于用户来说是很重要的。在 Node.js 中，我们可以使用 WebSocket 技术来实现在线人数的更新。本文将介绍如何使用 Node.js 和 We...

    10 个月前

相关推荐

    暂无文章