Ripple 点击波纹

使用方法

对元素追加ax-ripple类即可实现在按钮、卡片、图片等元素上实现连续点击连续波纹效果。波纹的颜色是半透明黑色，如果需要其他颜色用户可根据需要修改CSS中相应的颜色值。对按钮举例使用如下：

普通按钮 primary

                                <a href="###" class="ax-btn ax-ripple">普通按钮</a>
                                <a href="###" class="ax-btn ax-primary ax-ripple">primary</a>
                                <button type="button" class="ax-btn ax-ad ax-ripple">提交button</button>

由于<input type="submit" />元素在内部不能创建波纹其他标签，所以该元素不适用波纹效果！

应用于卡片

对卡片列表中的ax-figure封面图片元素追加ax-ax-ripple类即可。

“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹

意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。

362 2019年1月2日
欧洲最长屋桥盛不下千年传奇

埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。

关键字：威尼斯暴雨最高纪录

                                <div class="ax-padding">
                                    <div class="ax-grid ax-space-xxl">
                                        <ul class="ax-grid-inner">

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure ax-ripple" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-8.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a>
                                                    </div>
                                                    <div class="ax-des">
                                                        意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。
                                                    </div>
                                                    <div class="ax-from">
                                                        <span><i class="ax-iconfont ax-icon-message-o-fill"></i> 362</span>
                                                        <span>2019年1月2日</span>
                                                    </div>
                                            </li>

                                            <li class="ax-grid-block ax-col-12">
                                                <div class="ax-card-block ax-padding-lr">
                                                    <div class="ax-img">
                                                        <a href="###" class="ax-figure ax-ripple" style="background-image:url(https://src.axui.cn/v1.0/examples/images/image-7.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a>
                                                    </div>
                                                    <div class="ax-title">
                                                        <a href="###" class="ax-ell-title">欧洲最长屋桥盛不下千年传奇</a>
                                                    </div>
                                                    <div class="ax-des">
                                                        埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
                                                    </div>
                                                    <div class="ax-keywords">
                                                        关键字：<span>威尼斯</span><span>暴雨</span><span>最高纪录</span>
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>

应用于头像

对头像的ax-avatar封面图片元素追加ax-ax-ripple类即可。

                                <a href="###" class="ax-avatar ax-xxs ax-ripple" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></a>
                                <a href="###" class="ax-avatar ax-xs ax-ripple" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head02.jpg)"></a>
                                <a href="###" class="ax-avatar ax-sm ax-ripple" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head03.jpg)"></a>
                                <a href="###" class="ax-avatar ax-md ax-ripple" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head04.jpg)"></a>
                                <a href="###" class="ax-avatar ax-ripple" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head05.jpg)"></a>
                                <a href="###" class="ax-avatar ax-lg ax-ripple" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head06.jpg)"></a>
                                <a href="###" class="ax-avatar ax-xl ax-ripple" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head07.jpg)"></a>
                                <a href="###" class="ax-avatar ax-xxl ax-ripple" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head08.jpg)"></a>