Materialize-css Waves(1)

📌 相关文章

📜 Materialize-css Waves(1)

📅 最后修改于: 2023-12-03 15:17:33.265000 🧑 作者: Mango

Materialize-css Waves

Materialize-css Waves是Materialize-css框架提供的一种特效，通过在用户交互时添加波浪形特效，增强用户体验。

使用方法

在HTML元素中添加waves-effect类以激活该特效，如下所示：

<button class="waves-effect waves-light btn">点击我</button>

配置项

可以通过在HTML元素中添加以下属性来对Waves进行配置：

data-waves-color

设置波浪的颜色。默认是深灰色(#444)。

<button class="waves-effect waves-light btn" data-waves-color="#ff0000">点击我</button>

data-waves-duration

设置波浪动画的持续时间，单位为毫秒。默认是1000ms。

<button class="waves-effect waves-light btn" data-waves-duration="2000">点击我</button>

data-waves-delay

设置波浪动画的延时，单位为毫秒。默认是0ms。

<button class="waves-effect waves-light btn" data-waves-delay="500">点击我</button>

data-waves-offset

设置波浪的偏移量（即波浪从元素中心开始扩散的初始半径），单位为像素。默认是20px。

<button class="waves-effect waves-light btn" data-waves-offset="40">点击我</button>

data-waves-class

设置波浪元素的CSS类名。默认是waves-effect。

<button class="btn" data-waves-class="my-waves">点击我</button>

DEMO示例

一个基本示例：

<head>
  <!-- Materialize-css CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <!-- Materialize-css JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
  <button class="waves-effect waves-light btn">Click me</button>
</body>

效果如下所示：

demo示例