这篇博客展示了如何使用原生JavaScript实现一个点击按钮时出现水波纹效果的功能。通过创建一个内含水波纹元素的按钮结构，并结合CSS样式和JavaScript事件监听，实现了点击按钮时水波纹扩散并最终消失的效果。文章详细解释了实现过程中的逻辑思路，包括获取点击坐标、计算水波纹的位置以及添加和移除动画类名的操作。
<!DOCTYPE html>
<html>
<head>
<title>按钮点击水波纹效果jquery</title>
<style type="text/css">
*,
*:after,
*:before {
box-sizing: border-box;
}
html {
-webkit-tap-highlight-color: transparent;
}
body {
font-family: "Open Sans", "Arial", sans-serif;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
padding: 50px 0;
}
.o-divider {
border: 0;
margin: 20px;
height: 1px;
background: #656D78;
}
.c-button {
-webkit-appearance: none;
position: relative;
display: inline-block;
padding: 12px 24px;
margin: 0;
vertical-align: middle;
overflow: visible;
color:
最低0.47元/天 解锁文章
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
