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. js的闭包

    一,关于js闭包的只是感觉很高大上似乎,对于学弱来说任何问题都是这样的,值得去钻研和提高. 资料上理解的都是关于js的闭包其实就是js的变量的作用域的灵活使用. 函数内部定义变量的时候,一定要用 va ...

  2. 基于线程池和连接池的Http请求

    背景:最新项目需求调用http接口,所以打算使用最新的httpClient客户端写一个工具类,写好了以后在实际应用过程中遇到了一些问题,因为数据量还算 大,每次处理大概要处理600-700次请求,平均 ...

  3. nginx虚拟主机配置

    nginx虚拟主机配置   虚拟主机的概念虚拟主机,就是把一台物理服务器划分成多个"虚拟"的服务器,每一个虚拟主机都可以有独立的域名和独立的目录nginx虚拟主机的配置nginx的 ...

  4. 转帖-[教程] Win7精简教程(简易中度)2016年8月-0day

    [教程] Win7精简教程(简易中度)2016年8月 0day 发表于 2016-8-19 16:08:41  https://www.itsk.com/thread-370260-1-1.html ...

  5. react mixins编写

    var LogMixin = { componentWillMount: function () { console.log('Component will mount'); }, component ...

  6. AWS EC2的VPN-PPTP搭建教程（on aws redhat6.5 X64 centOS 6.5）

    前些日子收到amazon的邮件通知,一年前申请的ec2到期了,一年免费的free tier没有了,放在上面的2个站已经欠费了十几美元了,不过我也不打算用了,准备重新注册账号(请不要鄙视我..) 1.注 ...

  7. hdu----1686 Oulipo (ac自动机)

    Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  8. U-Boot

    U-Boot U-Boot,全称 Universal Boot Loader,是遵循GPL条款的开放源码项目.从FADSROM.8xxROM.PPCBOOT逐步发展演化而来.其源码目录.编译形式与Li ...

  9. 学完了js的知识，一起分享总结知识点

    又一个知识点学完了,到了总结学习效果和知识总结的时间了.js这个编程语言相对于html和css的逻辑性要强一些,也比较不容易上手.概念性的知识点不难理解,就是实际的操作并不容易,需要通过学习和借鉴案列 ...

  10. 浮动框控制及切换、banner随机数js

    1.浮动置控制及切换 <div class="banner1"></div><div class="bot_banner"> ...