非常漂亮的Web前端波形点击效果

介绍一种Web前端波形点击效果，第一次发文，大佬勿喷。
我的博客

介绍 Waves

这需要 Waves ，但是作者早在2018年就停止了对他的更新。

官网：Waves官网 - http://fian.my.id/Waves/
下载最新：v0.7.6（2018.01.10）【最新】
Github：https://github.com/fians/Waves

使用 Waves

首先把 waves.min.css和waves.min.js引入您的html即可。像这样：

<link rel="stylesheet" type="text/css" href="css/waves.min.css">
<script type="text/javascript" src="js/waves.min.js"></script>

达成效果

普通按钮点击动效：

<p id="colored-button" class="text-center"><a class="btn float-buttons">Button</a><!--还可以使用别的标签，如button或input-->
</p>
<script type="text/javascript">Waves.init(); // 注意这里很重要Waves.attach('.float-buttons', ['waves-button', 'waves-float']);
</script>

圆形按钮点击动效：

<p id="colored-icon" class="text-center"><i class="fa fa-bars float-icon"></i>
</p>
<script type="text/javascript">Waves.init(); Waves.attach('.float-icon', ['waves-circle', 'waves-float']);
</script>

DIV 和图像点击动效：

<!--无浮动效果-->
<div class="boxes flat-box">Box01</div>
<!--带有浮动效果-->
<div class="boxes float-box">Box02</div>
<div class="clear"></div>
<p class="text-center"><!--这里放入图片--><img class="waves-image" src="1.jpg">
</p>
<script type="text/javascript">Waves.init(); // 注意这里很重要Waves.attach('.flat-box', ['waves-block']);Waves.attach('.float-box', ['waves-block', 'waves-float']);Waves.attach('.waves-image');
</script>

文档

除了上述运用，还可以用在别的东西上面。

附加效果

要将Wave的效果（或者我们通常称之为"波纹"）连接到HTML元素，可以使用Waves.attach()

<a href="#" class="button">Click Here</a>
<script type="text/javascript">Waves.attach('.button');
</script>

Waves.attach()附带 2 个参数，第一个是您想要附加的 DOM 元素（或表示它的字符串，如 jQuery），第二个参数是将应用于该元素的 CSS 类数组。

<a href="#" class="button">Click Here</a>
<script type="text/javascript">Waves.attach('.button', ['waves-button', 'waves-float']);
</script>

初始化

将波连接到 HTML 元素后，您可以用初始化波来启动效果。您还可以通过在选项参数上传递来配置波。有关更多信息，请参阅 API 页面。Waves.init() Waves.init()

<a href="#" class="button">Click Here</a>
<script type="text/javascript">Waves.attach('.button', ['waves-button', 'waves-float']);Waves.init();
</script>

设计是灵活的。这意味着你仍然可以附加到另一个元素后的影响。Waves.init()

<a href="#" class="button">Click Here</a>
<script type="text/javascript">Waves.init();Waves.attach('.button', ['waves-button', 'waves-float']);
</script>

其他

#	类	作用
1	`.waves-button`	半圆形按钮样式。
2	`.waves-float`	单击元素时的浮动效果。
3	`.waves-circle`	圆形（圆形）风格。
4	`.waves-block`	用于添加到元素。

浏览器支持

IE 10++

Chrome 14++

Firefox 9++

Safari 5.1++

Opera 11.6++

iOS 6++ (Safari)

Windows Phone 8.1 (IE)

Android Browser 4++

END-------------------》

非常漂亮的Web前端波形点击效果相关推荐

Web前端之实现手风琴效果
源代码如下所示:如要复制,记得换图哦! <!DOCTYPE html> <html lang="en"> <head><meta char ...
WEB前端：06_accordion手风琴效果
accordion手风琴效果网站常用效果之一,以下为简化版,用于学习javascript基础知识. 效果图: accordion手风琴效果 - 纯js简化版 <html> <hea ...
web前端开发 —— 一个对联效果
一个对联效果对联效果 <div style="width:980px; height:20000px; margin:0px auto; position:relative;&quo ...
web前端基础——实现动画效果
当两个效果之间变换时,可以使用transition过渡属性,但是有多个效果来回变换时,就需要使用动画效果,且动画过程可控(重复播放,画面暂停,最终画面等) 文章目录 1.简介 2.实现步骤 3.复合属 ...
Web前端——登录界面hover效果
登录界面hover效果 Demo1(来源:B站"艾恩小灰灰") 源代码: html+javascript: css: 效果图: Demo1(来源:B站"艾恩小灰灰&quo ...
html背景对联效果-恭喜新禧,web前端开发 —— 一个对联效果
对联效果 document.writeln(" "); document.writeln(" "); document.writeln("" ...
移动web前端下拉刷新效果
直接复制粘贴放在页面中即可 <script> window.onload = function(){ window.addEventListener('touchstart', touc ...
java web从入门到精通光盘_0基础入门 IT，Web前端、Java、C++和Linux哪种好？
现在是21世纪,是科学技术大力发展的一个时代,IT行业已经成为现在的一个非常热门的一个行业,许许多多的人都想要往IT方面发展,找IT方面相关的一个工作. 很多想要接触IT行业的初学者伤透了脑筋,我该学 ...
Web前端开发培训就业前景好不好？
Web前端开发培训就业前景好不好?目前疫情还没结束,但Web前端人才需求持续增加,前端薪资工资较高,就业方向比较多,未来发展前途也比较广阔,前端程序员的就业前景可观,随着前端工作年限的增加工资也是同步 ...

非常漂亮的Web前端波形点击效果

非常漂亮的Web前端波形点击效果

介绍 Waves

使用 Waves

达成效果

文档

附加效果

初始化

其他

浏览器支持

非常漂亮的Web前端波形点击效果相关推荐

最新文章

热门文章