Materialise CSS Waves _MaterializeCSS

物化CSS波被用作外部库, 用于创建” 材料设计” 中概述的墨水效果。
以下是Materialize CSS中的类及其效果的列表：

Index	班级名称	Description
1)	waves-effect	用于在控件上施加波浪效果。
2)	waves-light	用于施加白色波浪效果。
3)	waves-red	用于施加红色波浪效果。
4)	waves-green	用于施加绿色波浪效果。
5)	waves-yellow	用于施加黄色波浪效果。
6)	waves-orange	用于施加橙色波浪效果。
7)	waves-purple	用于施加紫色波浪效果。
8)	waves-teal	它用于施加蓝绿色的波浪效果。

如何应用Materialise CSS Waves？你可以在任何元素上应用波浪效果。如果要在按钮上放置wave效果, 请在按钮上添加wave效果类。如果要使波效果变为白色, 则将两个波效果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.jquery.com/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="http://www.srcmini.com/#!" class="waves-effect btn secondary-content"> Send< /a> < /div> < div class="collection-item"> < code class="language-markup"> waves-light< /code> < a href="http://www.srcmini.com/#!" class="waves-effect waves-light btn secondary-content"> Send< /a> < /div> < div class="collection-item"> < code class="language-markup"> waves-red< /code> < a href="http://www.srcmini.com/#!" class="waves-effect waves-red btn secondary-content"> Send< /a> < /div> < div class="collection-item"> < code class="language-markup"> waves-yellow< /code> < a href="http://www.srcmini.com/#!" class="waves-effect waves-yellow btn secondary-content"> Send< /a> < /div> < div class="collection-item"> < code class="language-markup"> waves-orange< /code> < a href="http://www.srcmini.com/#!" class="waves-effect waves-orange btn secondary-content"> Send< /a> < /div> < div class="collection-item"> < code class="language-markup"> waves-purple< /code> < a href="http://www.srcmini.com/#!" class="waves-effect waves-purple btn secondary-content"> Send< /a> < /div> < div class="collection-item"> < code class="language-markup"> waves-green< /code> < a href="http://www.srcmini.com/#!" class="waves-effect waves-green btn secondary-content"> Send< /a> < /div> < div class="collection-item"> < code class="language-markup"> waves-teal< /code> < a href="http://www.srcmini.com/#!" class="waves-effect waves-teal btn secondary-content"> Send< /a> < /div> < /div> < /div> < /body> < /html>

立即测试
【Materialise CSS Waves】输出