Ripple animation effect-MDUI development document, Material Design front-end framework

Ripple animation effect

After adding the ripple animation effect, when the element is clicked, a water ripple effect that spreads outward will be generated.

Call method

Just add the class .mdui-ripple to take effect.

Instructions

Add ripple effect

Just add the class on the element .mdui-ripple, There will be a ripple animation effect when you click on the element.

Example

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

If you want to img、input And other labels that cannot have sub-elements, you need to put .mdui-ripple Add to its parent element.

Example

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

Specify the ripple color

The default ripple is a dark background, when passing .mdui-color-[color] When a background color is specified, or in a dark theme, the ripples default to white.

Can be added by adding classes .mdui-ripple-[color] To specify the 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>

List of CSS class names

Class name	effect
`.mdui-ripple`	Add ripple effect
`.mdui-ripple-[color]`	Specify the ripple color

Ripple animation effect

Call method

Related Reading

Instructions

Add ripple effect

Specify the ripple color

List of CSS class names