html点击显示语音波浪,html5鼠标点击按钮波纹动画特效

特效描述：html5 鼠标点击 按钮波纹动画。html5按钮波纹动画

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

Button A

Button B

Waves.attach('.flat-buttons', ['waves-button']);

Waves.attach('.float-buttons', ['waves-button', 'waves-float']);

Waves.attach('.float-button-light', ['waves-button', 'waves-float', 'waves-light']);

var currentRoute = false;

$(document).on('ready', function () {

// Init Waves

Waves.init();

Waves.attach('.drag-ripple', 'waves-block', true);

Waves.attach('#bg-pattern', null, true);

init();

$(window).on('hashchange', routing);

/**

* Example source code click

*/

$('#example .top-button').on('click', function () {

var type = $(this).data('code');

$('#source-code .box .code').addClass('hide');

$('#source-code .box #code-' + type).removeClass('hide');

$('#source-code').removeClass('hide');

setTimeout(function () {

$('#source-code').addClass('show');

}, 50);

});

$('#source-code .top-button').on('click', function () {

$('#source-code').removeClass('show');

setTimeout(function () {

$('#source-code .box .code').addClass('hide');

$('#source-code').addClass('hide');

}, 500);

});

});