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

2014/08/06 分类:前端开发素材分享 浏览:6,734次  来源:原创 1个评论
 
 
 
6,734
 
 
 
  • 4.25 / 5 5
4.25分(4票)
0

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,不妨一看:点击查看

转载请注明来源!

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

  1. Material Design风格的水波涟漪效果(Ripple Effect)的实现

    Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design ...

  2. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

  3. 【Android】进入Material Design时代

    由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...

  4. Material Design系列第六篇——Defining Custom Animations

    Defining Custom Animations //自定义动画 This lesson teaches you to //本节课知识点 Customize Touch Feedback //1. ...

  5. 进入Material Design时代

    ------------------------------------------------------------------------------ GitHub:lightSky 微博:   ...

  6. Material Design学习之 Button(具体分析,传说中的水滴动画)

    转载请注明出处:王亟亟的大牛之路 上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/5 ...

  7. Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...

  8. 直接拿来用!十大Material Design开源项目

    来自:http://www.csdn.net/article/2014-11-21/2822753-material-design-libs/1 介于拟物和扁平之间的Material Design自面 ...

  9. Android 5.0之应用中实现材料设计—Material Design

    上午的时候在刷Google+,看到了Abraham Williams转发了一篇强文,是Android Developers网站新发的一篇博客—Implementing Material Design ...

随机推荐

  1. [css] CSS相对定位|绝对定位

    第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...

  2. Head First 设计模式 --6 命令模式

    命令模式:将"请求"封装成对象,以便使用不同的请求,队列或者日志来参数化其他对象.命令模式也支持可撤销的操作.用到的原则:1.封装变化2.组合优于继承3.针对接口编程,不能针对实现 ...

  3. 笨办法学 Python (Learn Python The Hard Way)

    最近在看:笨办法学 Python (Learn Python The Hard Way) Contents: 译者前言 前言:笨办法更简单 习题 0: 准备工作 习题 1: 第一个程序 习题 2: 注 ...

  4. 樱花漫地集于我心,蝶舞纷飞祈愿相随 训练:a preparation 训练:a preparation

    知识点:                                                                                               分 ...

  5. ABAP之PINYING拼音

    前面说了声母韵母,那么现在来说说ABAP里的拼音——域,数据元素,结构 PINGGUO = 苹果 T-CODE : SE11   如下图 域:是一些特定值的集合,或者某一种特殊用途的集合.如:需要定义 ...

  6. javascript 特殊的一些知识

    基础知识 1.注释/**/ 块注释,与正则表达式有冲突,不安全. 2.js数字类型只有一个,即为64位的浮动值 3.NaN是一个数值,他不能产生正常结果的运算结果.NaN不等于任何值,包括它自己.is ...

  7. BZOJ1778 [Usaco2010 Hol]Dotp 驱逐猪猡

    首先我们列出转移矩阵$M$,$M_{i, j} = \frac {1 - \frac{p} {q}} {deg[i]}$(i,j之间有边)or $M_{i, j} = 0$(i,j之间没边) 则这个矩 ...

  8. C#测试web服务是否可用

    winform客户端经常需要调用webservice或者WCF进行数据交互,但是远程服务有可能不存在或者服务器不可用,客户端只能通过超时或者捕获到异常感知服务不可用.其实有一个COM借口可用快速的检测 ...

  9. iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接)

    iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接) 这里推荐两款好用的Xcode插件,并提供下载链接. 一.插件和使用如下: 1.两款插件 对项目中图片提供自动提示功能的插件:KSImag ...

  10. PHP 函数(2)

    自定义函数: $name = "fakeface"; function dispalyName(){ echo "fakeface"; } function r ...