📜  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

输出: