共计 1938 个字符，预计需要花费 5 分钟才能阅读完成。
类似 material-ui 的 button 效果
步骤
1. 在页面写出一个 button 并赋予简单的样式
代码
<body>
<div>
<button> 这是一个按钮 </button>
</div>
</body>
button {
display: block; /* button 默认是 inline-block 无法用 margin 给它居中 */
margin: 50px auto;
height: 60px;
width: 150px;
color: #FFF;
font-size: 16px;
background: #E95546;
outline: none;
border: 0;
cursor: pointer; /* 为了增加用户体验 */
position: relative; /* 为了保持和 ripple 的位置关系 */
overflow: hidden; /* 为了遮盖超出的 ripple */
}
效果
2. 添加水波纹的基础 css 样式
代码
.ripple {
position: absolute; /* 为了保持和 button 的位置关系 */
border-radius: 50% 50%; /* 水波纹圆形 */
background: rgba(255, 255, 255, 0.4); /* 水波纹颜色 */
/* 下面与动画效果相关 是 0% 时候的状态 */
/* 默认的 transform-origin 是 center 即中心点 */
transform: scale(0);
-webkit-transform: scale(0);
opacity: 1;
}
3. 给水波纹加上动画的 css
代码
.rippleEffect {
/* 执行时长 0.6s、效果为渐变 (linear)、名称为 rippleDrop 的动画 */
-webkit-animation: rippleDrop .6s linear;
animation: rippleDrop .6s linear;
}
@keyframes rippleDrop {
/* 下面是动画 100% 时候的状态 */
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
@-webkit-keyframes rippleDrop {
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
4. 最后添加点击事件
代码
$(“button”).click(function (e) {
$(“.ripple”).remove(); // 每次先把之前添加的水波纹 div 删除
let button_left = $(this).offset().left; // button 距离页面左边的距离
let button_top = $(this).offset().top; // button 距离页面上边的距离
let button_width = $(this).width(); // button 的宽度
let button_height = $(this).height(); // button 的高度
// 水波纹 div 为一个圆形，使得它的半径等于 button 的最长边，故在这里计算最长边是多少
let ripple_width = 0;
ripple_width = button_width > button_height ? button_width : button_height;
// e.pageX 是 click 事件的鼠标触发点距离页面左边的距离
// e.pageY 是 click 事件的鼠标触发点距离页面上边的距离
// 这里的算法是，算出鼠标点击点的坐标为 (e.pageX – button_left, e.pageY – button_top)
// 但是由于 `transform-origin` 默认是 center，所以这里再减去半径才是 div 应该的位置
let ripple_x = e.pageX – button_left – ripple_width / 2;
let ripple_y = e.pageY – button_top – ripple_width / 2;
// 往 button 里面塞水波纹 div
$(this).prepend(“<div class=’ripple’></div>”);
// 给水波纹 div 应用样式和动画
$(“.ripple”)
.css({
width: ripple_width + ‘px’,
height: ripple_width + ‘px’,
top: ripple_y + ‘px’,
left: ripple_x + ‘px’
})
.addClass(“rippleEffect”);
})
Attention 别忘了引入 jquery 哦
<script src=”https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js”></script>
效果
END
源码地址
