您的位置：首页 > 其它

Waves：类Material Design 的圆形波浪（涟漪）点击特效插件

2015-06-18 10:37 441 查看
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-effectwaves-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-effectwaves-button">Click Here</button>
<!-- It also support a, input submit and input button tag -->
<a href="#" class="waves-effectwaves-button">A Tag</a>
<input type="submit" class="waves-effectwaves-button" value="Input Submit">
<input type="button" class="waves-effectwaves-button" value="Input Button">

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

1
2
3
4
56

<!-- Before displaying the effect -->
<input class="waves-button-input" type="submit" value="Button C">
<!-- After displaying the effect -->
<i class="waves-effectwaves-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-effectwaves-circle"></i>

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

另外：Tutsplus上有一篇文章详细介绍了实现该效果的方法，Recreating the Touch Ripple Effect as Seen on Google Design，不妨一看：点击查看
http://devework.com/waves.html?replytocom=1630
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航