Waves:类Material Design 的圆形波浪(涟漪)点击特效插件

Google Material Design 相信你也了解不少了,但目前无论是应用端还是网页端,可参考案例尚少。本着补充《Material Design 一些相关中文资料/资源收集汇总》一文的目的,介绍一款类Google Material Design 的圆形波浪(涟漪)点击特效插件Waves。

Google Material Design 中有一个特效,点击某个色块区域会有圆形波浪(涟漪)渐现放大的效果(当然,对应应用端则为触摸事件)。Waves 就是这么一款在网页上实现该特效的javascript 插件。

Waves 项目地址

Demo           Github

浏览器兼容情况:Chrome, Firefox, Opera and Safari) 与 IE10+

Waves 使用方法

Waves是很容易使用的,下载文件后,解压将waves.min.css 与 waves.min.js文件引用到你的项目中,当激活插件后即可使用!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <head>
        <title>Waves example</title>
 
        <link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />
 
    </head>
    <body>
        <a href="#" class="waves-effect waves-button">Click Here</a>
 
        <script type="text/javascript" src="/path/to/waves.min.js"></script>
        <script type="text/javascript">
            Waves.displayEffect();
        </script>
    </body>
</html>

Waves 也提供了LESS, SCSS, 跟 SASS 的源码,方便你使用!

使用方法:

为需要添加特效的div 或者class 添加waves-effect 、 .waves-button 这两个类即可。

1
2
3
4
5
<button class="waves-effect waves-button">Click Here</button>
<!-- It also support a, input submit and input button tag -->
<a href="#" class="waves-effect waves-button">A Tag</a>
<input type="submit" class="waves-effect waves-button" value="Input Submit">
<input type="button" class="waves-effect waves-button" value="Input Button">

特别注意的是,若为input标签,则需要手动添加i标签包裹之。

1
2
3
4
5
6
<!-- Before displaying the effect -->
<input class="waves-button-input" type="submit" value="Button C">
<!-- After displaying the effect -->
<i class="waves-effect waves-button waves-input-wrapper" style="width:85px;height:36px;">
    <input class="waves-button-input" type="submit" value="Button C">
</i>

Waves 也支持一些webfont icon(例如 FontAwesome),只需要类似下面这样添加代码:

1
<i class="fa fa-gear waves-effect waves-circle"></i>

更多使用方法访问官方网站即可查询!

另外:Tutsplus上有一篇文章详细介绍了实现该效果的方法,Recreating the Touch Ripple Effect as Seen on Google Design,不妨一看:点击查看

http://devework.com/waves.html?replytocom=1630

时间: 2024-10-03 14:56:33

Waves:类Material Design 的圆形波浪(涟漪)点击特效插件的相关文章

纯CSS3 Material Design风格单选框和复选框

这是一款使用纯CSS3制作的Material Design风格单选框和复选框插件.该插件只需引入指定的CSS文件,然后配合特定的HTML结构,就可以生成漂亮的Material Design风格单选框和复选框. 该纯CSS3 Material Design风格单选框和复选框的github地址为:https://github.com/bantikyan/icheck-material Demo源码下载地址:https://tc5.us/file/21793581-403946075 Demo截图:

CSS:placeholder-shown伪类实现Material Design占位符交互效果

一.Material Design规范中占位符交互效果 Material Design风格占位符交互效果官方示意见此demo页面. 效果可以参见下面的GIF录屏示意: 现在这种设计在移动端很常见,因为宽度是稀缺的.相信不少人设计项目中有实现过这种交互,而且,我敢保证是利用JS实现的. 实际上,我们可以借助CSS :placeholder-shown伪类,纯CSS,无任何JS,实现这样的占位符交互效果. :placeholder-shown表示,当输入框的placeholder内容显示的时候,输入

进入Material Design时代

由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Design 官方Material Design详细介绍文档:http://www.google.com/design/spec/material-design/introduction.html 关于Material Design是Android 5.0系统的重头戏,并在以后App中将成为一种设计标准,而

【Android】进入Material Design时代

由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Design 官方Material Design详细介绍文档:http://www.google.com/design/spec/material-design/introduction.html Material Design是Android 5.0系统的重头戏,并在以后App中将成为一种设计标准,而且随

[翻译]Android 5.0之应用中实现材料设计—Material Design

上午的时候在刷Google+,看到了Abraham Williams转发了一篇强文,是Android Developers网站新发的一篇博客—Implementing Material Design in your Android App.觉得很前卫,对于新发布的Android版本号Android 5.0是一个很好的学习和了解的机会,所以就花了些时间把它翻译了下来,希望对自己.对其它人有所启发. 因为翻译Android开发博客和API也只是业余爱好,水平有限,其中不免有不准确的地方,所以把原文地

Android Material Design学习之RecyclerView代替 ListView

前言 # Android Material Design越来越流行,以前很常用的 ListView 现在也用RecyclerView代替了,实现原理还是相似的.笔者实现一下 RecyclerView,代码比较简单,适合初学者,如有错误,欢迎指出. 源码地址(欢迎star) https://github.com/studychen/SeeNewsV2 本文链接 http://blog.csdn.net/never_cxb/article/details/50495505,转载请注明出处. 复习 L

【转】MATERIAL DESIGN设计规范学习心得

编者按:自学笔记就该这么做!今天分享@東門王三 同学关于Material Design的自学成果,他的学习笔记严谨有序,触类旁通,从Material Design到其他系统的设计规范都有所研究,还认真地做了思维导图,同学们可以边学习边借鉴他的自学方法,一举两得呦. 自学的一大重点就是读书,推荐同学们看一下华为设计总监的经验:<华为设计总监尤原庆:怎样读设计书> 想读好书的同学,可直接到:设计师图书导航 挑选. @東門王三 :随着Android系统从Android 4.4逐步升级到Android

打造极致Material Design动画风格Button

======================================================== 作者:qiujuer 博客:blog.csdn.net/qiujuer 网站:www.qiujuer.net 开源库:Genius-Android 转载请注明出处:http://blog.csdn.net/qiujuer/article/details/42471119 --学之开源,用于开源:初学者的心态,与君共勉! ================================

Android Material Design动画

最近在看一些关于Material Design的东西,还记得在博客<你所不知道的Activity转场动画--ActivityOptions>中,我们介绍了一种优雅的activity过度动画.如果大家看了最后给出的参考链接,会发现还有很多内容是值得我们学习的,所以这篇博客,我们来学习一下这一页上剩下的东西. 一.触摸反馈 大家都知道,在Material Design中,触摸反馈的效果非常绚丽,是一种涟漪的效果,令我们高兴的是,这种效果也是可以自定义的. <LinearLayout xmln