波纹效果

安卓端material design 之 ripple（波纹）效果

对于Material design，我是从ionic文档（https://ionicframework.com/docs/api/button）看到的，是一种做移动和桌面应用程序的框架，值得吐槽的是，ionic只扩展英语和日语文档，没有其它语言的。。

Material design是安卓的一种设计规范和风格，如果你在安卓app几乎很多UI上看到了炫酷的视觉效果，前端还想着用CSS和JS实现它的话，大概率就走错方向了，实现炫酷效果，可以用Material Design的组件，当然，对交互效果感兴趣的前端，还是可以深入源码，自己封装一个的。说到效果，有个涟漪波纹效果我很是稀罕。

可以到Muse-UI看看涟漪效果
https://muse-ui.org/#/zh-CN/usage

Cards组件实例

web端

npm安装

npm install @material/card

样式导入

@use "@material/card";

@include card.core-styles;

js

import {MDCRipple} from '@material/ripple';

const selector = '.mdc-button, .mdc-icon-button, .mdc-card__primary-action';
const ripples = [].map.call(document.querySelectorAll(selector), function(el) {
return new MDCRipple(el);
});

如果你想了解Android、IOS、Flutter端的，可以去
https://material.io/components/cards/web#api