前言
Material Design 是 Google 推出的一套设计语言,旨在提供一致性、流畅性和平台化的视觉和用户体验。其设计原则为:材料是具有物理性质的,它可以自然流畅地移动和交互,并且可以被印刷、层叠或成型。
在 Material Design 中,CSS 是实现交互性和自然性的重要工具之一。本文将介绍 Material Design 中常用的 CSS 属性与工具,包括阴影、ripple 点击效果、动画、颜色、图标等,帮助读者更好地应用 Material Design。
阴影
在 Material Design 中,阴影是一个很常见的元素,可以让元素看起来更加有深度和立体感。常用的阴影效果如下:
-- -------------------- ---- ------- -- --- -- ----------- --- --- --- ------- -- -- ------ -- --- -- ----------- --- --- --- ------- -- -- ------ -- --- -- ----------- --- --- --- ------- -- -- ------ -- --- -- ----------- --- --- ---- ------- -- -- ------ -- --- -- ----------- --- ---- ---- ------- -- -- ------
这些阴影效果不仅可以应用在按钮、卡片等元素上,还可以应用在顶部导航栏、底部导航栏等元素上。
Ripple 点击效果
Ripple 点击效果是 Material Design 中常用的点击效果,可以让用户感受到点击的互动性和自然性。
下面是一个示例代码:
<button class="ripple"></button>
-- -------------------- ---- ------- ------- - --------- --------- --------- ------- ---------- -------------- -- --- ------ ----- ------- ----- -------------- ---- ----------------- ------- -- -- ----- - -------------- - -------- --- -------- ------ --------- --------- ------ ------ ------- ------ ---- ---- ----- ---- ---------- ----------------- ----- -- --------- ----------------- ------- -- -- ----- -------------- ---- --------------- ----- ----------- --------- ---- --------- - --------------------- - ---------- ----------------- ----- -- --------- -------- -- -
效果如下:
动画
动画是 Material Design 中要素之一,可以使元素更加生动、自然,增强用户体验。
下面是一个使用 animation 属性实现的旋转动画示例代码:
<div class="rotate"></div>
-- -------------------- ---- ------- ------- - ------ ----- ------- ----- ----------------- ----- ---------- ----------- -- --------- - ---------- ----------- - -- - ---------- ------------- - ---- - ---------- --------------- - -
效果如下:
颜色
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 的步骤如下:
在
<head>
标签中引入以下代码:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.6.1/css/materialdesignicons.min.css">
在 HTML 代码中使用图标,示例代码如下:
<i class="mdi mdi-account"></i>
根据需求修改图标样式,例如:
.mdi-account { font-size: 24px; color: #666; }
以上就是 Material Design 中常用的 CSS 属性与工具。希望读者可以通过本文更好地了解 Material Design,更好地利用 CSS 实现 Material Design 的效果,为用户提供更好的体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67972d62504e4ea9bde37430