Material Design 中常用的 CSS 属性与工具

阅读时长 5 分钟读完

前言

Material Design 是 Google 推出的一套设计语言,旨在提供一致性、流畅性和平台化的视觉和用户体验。其设计原则为:材料是具有物理性质的,它可以自然流畅地移动和交互,并且可以被印刷、层叠或成型。

在 Material Design 中,CSS 是实现交互性和自然性的重要工具之一。本文将介绍 Material Design 中常用的 CSS 属性与工具,包括阴影、ripple 点击效果、动画、颜色、图标等,帮助读者更好地应用 Material Design。

阴影

在 Material Design 中,阴影是一个很常见的元素,可以让元素看起来更加有深度和立体感。常用的阴影效果如下:

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

这些阴影效果不仅可以应用在按钮、卡片等元素上,还可以应用在顶部导航栏、底部导航栏等元素上。

Ripple 点击效果

Ripple 点击效果是 Material Design 中常用的点击效果,可以让用户感受到点击的互动性和自然性。

下面是一个示例代码:

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

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

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

效果如下:

动画

动画是 Material Design 中要素之一,可以使元素更加生动、自然,增强用户体验。

下面是一个使用 animation 属性实现的旋转动画示例代码:

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

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

效果如下:

颜色

Material Design 中的颜色有一套固定的规范,其中包含 17 种颜色,分为基础颜色和强调颜色,如下:

基础颜色:

  • 红色:#F44336
  • 粉红色:#E91E63
  • 紫色:#9C27B0
  • 深紫色:#673AB7
  • 靛青色:#3F51B5
  • 蓝色:#2196F3
  • 浅蓝色:#03A9F4
  • 青色:#00BCD4
  • 绿色:#4CAF50
  • 黄绿色:#8BC34A
  • 黄色:#FFEB3B
  • 橙色:#FF9800
  • 橙红色:#FF5722
  • 棕色:#795548
  • 灰色:#9E9E9E
  • 深灰色:#607D8B

强调颜色:

  • 鲜艳红色:#FF5252
  • 粉色:#FF4081
  • 紫罗兰色:#E040FB
  • 黄色:#FFC107
  • 青绿色:#69F0AE

在应用 Material Design 中,可以使用这些颜色,并根据需求灵活地进行调整。

图标

Material Design 中的图标是一套开源项目 Material Design Icons,包含 950+ 个图标,都是向量图标,可以无限放大而不失真。

使用 Material Design Icons 的步骤如下:

  1. <head> 标签中引入以下代码:

  2. 在 HTML 代码中使用图标,示例代码如下:

  3. 根据需求修改图标样式,例如:

以上就是 Material Design 中常用的 CSS 属性与工具。希望读者可以通过本文更好地了解 Material Design,更好地利用 CSS 实现 Material Design 的效果,为用户提供更好的体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67972d62504e4ea9bde37430

纠错
反馈