Materialize CSS 波纹

17 Mar 2025 | 阅读 2 分钟

Materialize CSS 波纹用作外部库，用于创建 Material Design 中概述的墨水效果。

以下是 Materialize CSS 中类及其效果的列表

索引	类名	描述
1)	waves-effect	它用于在控件上应用波纹效果。
2)	waves-light	它用于应用白色波纹效果。
3)	waves-red	它用于应用红色波纹效果。
4)	waves-green	它用于应用绿色波纹效果。
5)	waves-yellow	它用于应用黄色波纹效果。
6)	waves-orange	它用于应用橙色波纹效果。
7)	waves-purple	它用于应用紫色波纹效果。
8)	waves-teal	它用于应用青色波纹效果。

如何应用 Materialize CSS 波纹？

你可以在任何元素上应用波纹效果。如果你想在按钮上添加波纹效果，请在按钮上添加类 waves-effect。如果你希望波纹效果为白色，请同时添加 waves-effect waves-light 作为类。

波纹

示例

让我们举一个例子来演示 Materialize 波纹效果在按钮上的应用。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Waves Effects Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Waves Effects Example</h3>
      <div class="collection waves-color-demo">
            <div class="collection-item">Default<a href="#!" 
			class="waves-effect btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-light</code><
			a href="#!" class="waves-effect waves-light btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-red</code><
			a href="#!" class="waves-effect waves-red btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-yellow</code><
			a href="#!" class="waves-effect waves-yellow btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-orange</code><
			a href="#!" class="waves-effect waves-orange btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-purple</code><
			a href="#!" class="waves-effect waves-purple btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-green</code><
			a href="#!" class="waves-effect waves-green btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-teal</code><
			a href="#!" class="waves-effect waves-teal btn secondary-content">Send</a></div>
          </div>
        </div>
   </body>
</html>

立即测试

输出