menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

涟漪动画效果

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

调用方式

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

使用方法

添加涟漪效果

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

Example
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>

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

Example
<div class="mdui-ripple">
  <img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>

指定涟漪颜色

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

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

Example
<button class="mdui-btn mdui-ripple mdui-ripple-black mdui-color-yellow">black</button>
<button class="mdui-btn mdui-ripple mdui-ripple-white mdui-color-blue">white</button>
<button class="mdui-btn mdui-ripple mdui-ripple-red">red</button>
<button class="mdui-btn mdui-ripple mdui-ripple-blue">blue</button>

CSS 类名列表

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