📌  相关文章
📜  Materialize-css Waves

📅  最后修改于: 2021-01-07 00:57:49             🧑  作者: Mango

Materialize-css Waves

Materialize-css 波用作外部库，用于创建“材料设计”中概述的墨水效果。

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

Index Class name Description
1) waves-effect It is used to apply a wave effect on the control.
2) waves-light It is used to apply a white colored wave effect.
3) waves-red It is used to apply a red colored wave effect.
4) waves-green It is used to apply a green colored wave effect.
5) waves-yellow It is used to apply a yellow colored wave effect.
6) waves-orange It is used to apply an orange colored wave effect.
7) waves-purple It is used to apply a purple colored wave effect.
8) waves-teal It is used to apply a teal colored wave effect.

如何应用Materialise CSS Waves?

您可以在任何元素上应用波浪效果。如果要在按钮上放置wave效果，请将class wave-effect放在按钮上。如果要使波效果变为白色，则将两个波效果Waves-light添加为类。

波

例

让我们以一个示例来演示按钮上的实体化波效果。



   
      The Materialize Waves Effects Example
            
      
      
                 
       
   
   
    
      
Waves Effects Example

      

            
DefaultSend

            
waves-light<
            a href="#!" class="waves-effect waves-light btn secondary-content">Send

            
waves-red<
            a href="#!" class="waves-effect waves-red btn secondary-content">Send

            
waves-yellow<
            a href="#!" class="waves-effect waves-yellow btn secondary-content">Send

            
waves-orange<
            a href="#!" class="waves-effect waves-orange btn secondary-content">Send

            
waves-purple<
            a href="#!" class="waves-effect waves-purple btn secondary-content">Send

            
waves-green<
            a href="#!" class="waves-effect waves-green btn secondary-content">Send

            
waves-teal<
            a href="#!" class="waves-effect waves-teal btn secondary-content">Send

输出：