srcmini物化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="#!"
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>立即测试
输出
评论前必须登录！
注册