特效描述: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);
});
});