menu

介绍

波纹效果是一个外部库,主要用于实现Material Design中的点击效果。

波纹效果

应用波纹效果

波浪效应可以应用于任何元素。要在按钮上设置波浪效果,只需在按钮上添加waves-effect类即可。如果您希望波浪效果为白色,请添加waves-effect waves-light类这两个类。


  <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      

自定义

有几种方法可以自定义波纹效果,可以使用预先创建的类,也可以通过创建新类来定义自己的颜色。

可用颜色

要使用这些,只需将相应的类添加到按钮即可。通过改变按钮的背景色和波纹效果来创造一些很酷的东西!


  <a href="#!" class="btn waves-effect waves-teal">发送</a>
          
默认发送
waves-light发送
waves-red发送
waves-yellow发送
waves-orange发送
waves-purple发送
waves-green发送
waves-teal发送
自定义颜色

如果你想要的颜色还不可用,你可以通过创建一个自定义的CSS类来轻松地制作你自己的波纹效果色。看看下面的例子,我们在其中添加了波纹棕色效果。


  /*
  创建CSS选择器时,
  将“brown”改为您选择的颜色
  */
  .waves-effect.waves-brown .waves-ripple {
   /* 按钮的背景色和文本色支持alpha值*/
    background-color: rgba(121, 85, 72, 0.65);
  }
          

圆形

如果希望波浪形成为非矩形,可以选择圆形波浪。在waves-effect类之外只需要添加waves-circle类即可。

HTML标记

  <a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
    <i class="material-icons">add</i>
  </a>
          
默认add
waves-lightadd