点击产生波浪效果的插件waves.js

更新时间：2019-08-15 11:41:07

waves.js使用方法

需要调用的两个文件waves.min.css，waves.min.js

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

给按钮添加点击动画

<style>
    #colored-button .btn { color: #fff; }
    #colored-button a, 
    #colored-button a:hover { background: #01BCFF; }
    #colored-button button,
    #colored-button button:hover { background: #1bb556; }
    #colored-button input,
    #colored-button input:hover { background: #ff4f0f; }
</style>
<p class="text-center">
    <a class="flat-buttons">Button A</a>
    <button class="flat-buttons">Button B</button>
    <input class="flat-buttons" type="submit" value="Button C">
</p>
<p id="colored-button" class="text-center">
    <a class="btn float-buttons">Button A</a>
    <button class="btn float-button-light">Button B</button>
    <input class="btn float-buttons" type="submit" value="Button C">
</p>
<script type="text/javascript">
    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']);
</script>

给Icons添加点击动画

<style>
    #colored-icon i { color: #fff; }
    #colored-icon i:nth-child(1) { background: #ff6400; }
    #colored-icon i:nth-child(2) { background: #d54f38; }
    #colored-icon i:nth-child(3) { background: #eb4d7e; }
    #colored-icon i:nth-child(4) { background: #d138c8; }
    #colored-icon i:nth-child(5) { background: #bd73ff; }
    #colored-icon i:nth-child(6) { background: #0074d6; }
</style>
<p class="text-center">
    <i class="fa fa-bars flat-icon"></i>
    <i class="fa fa-bookmark flat-icon"></i>
    <i class="fa fa-calendar flat-icon"></i>
    <i class="fa fa-envelope flat-icon"></i>
    <i class="fa fa-exclamation flat-icon"></i>
    <i class="fa fa-folder flat-icon"></i>
</p>
<p id="colored-icon" class="text-center">
    <i class="fa fa-bars float-icon"></i>
    <i class="fa fa-bookmark float-icon-light"></i>
    <i class="fa fa-calendar float-icon"></i>
    <i class="fa fa-envelope float-icon-light"></i>
    <i class="fa fa-exclamation float-icon"></i>
    <i class="fa fa-folder float-icon-light"></i>
</p>
<script type="text/javascript">
    Waves.attach('.flat-icon', ['waves-circle']);
    Waves.attach('.float-icon', ['waves-circle', 'waves-float']);
    Waves.attach('.float-icon-light', ['waves-circle', 'waves-float', 'waves-light']);
</script>

给div或图片添加点击动画

<div class="boxes flat-box">Flat Box</div>
<div class="boxes float-box">Float Box</div>
<div class="clear"></div>
<p class="text-center">
    <img class="waves-image" src="imgae/tp.jpg">
</p>
<script type="text/javascript">
    Waves.attach('.flat-box', ['waves-block']);
    Waves.attach('.float-box', ['waves-block', 'waves-float']);
    Waves.attach('.waves-image');
</script>