个性化阅读
专注于IT技术分析

Materialise CSS Waves

物化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>

立即测试

输出

Materialize Waves1
赞(0)
未经允许不得转载:srcmini » Materialise CSS Waves

评论 抢沙发

评论前必须登录!