涟漪动画效果

2018-05-24 17:43 更新

添加涟漪动画效果后,会在点击元素时,产生向外扩散的水波纹效果。

调用方式

只需添加类 .mdui-ripple 即可生效。


相关资源

Material Design 径向转换设计规范


使用方法

添加涟漪效果

只需在元素上添加类 .mdui-ripple,点击元素时就会有涟漪动画效果。

在线运行


如果要在 img、input 等无法拥有子元素的标签上使用,需要把 .mdui-ripple 添加到它的父元素上。

在线运行


指定涟漪颜色

默认的涟漪为深色背景,当通过 .mdui-color-[color] 指定了背景色、或在深色主题下时,涟漪默认为白色。

可通过添加类 .mdui-ripple-[color] 来指定涟漪颜色。

在线运行


CSS 类名列表

 类名 效果
 .mdui-ripple  添加涟漪效果
 .mdui-ripple-[color] 指定涟漪颜色


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号