codecamp

涟漪动画效果

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

调用方式

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

相关资源

Material Design 径向转换设计规范

使用方法

添加涟漪效果

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

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

指定涟漪颜色

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

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

CSS 类名列表

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

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }