u
This commit is contained in:
oneao committed
1 parent
50fdacac07
commit
48cd564201
13 files changed
+220
-122
No files matched your search
@@ -1,103 +1,109 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Material ui 水波纹效果</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="shortcut icon" href="#" />
|
||||
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>后台按钮渐深点击升级版</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.btn-group {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
/* 基础按钮 */
|
||||
.admin-btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
margin: 0 6px 6px 0;
|
||||
outline: none;
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
/* 按钮颜色和overlay变量 */
|
||||
.btn-primary {
|
||||
background-color: #2563eb;
|
||||
--overlay-color: rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
.btn-secondary {
|
||||
background-color: #1f2937;
|
||||
--overlay-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.btn-danger {
|
||||
background-color: #ef4444;
|
||||
--overlay-color: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
/* hover变浅 */
|
||||
.admin-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* 点击渐深叠加层 */
|
||||
.admin-btn::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--overlay-color), rgba(0, 0, 0, 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 点击触发动画 */
|
||||
.admin-btn.active::after {
|
||||
animation: tideDeep 0.35s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes tideDeep {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
50% {
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<style>
|
||||
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 */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.rippleEffect {
|
||||
/* 执行时长0.6s、效果为渐变(linear)、名称为rippleDrop的动画 */
|
||||
-webkit-animation: rippleDrop 0.6s linear;
|
||||
animation: rippleDrop 0.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>
|
||||
<button>这是一个按钮</button>
|
||||
<div class="btn-group">
|
||||
<button class="admin-btn btn-primary">保存修改</button>
|
||||
<button class="admin-btn btn-secondary">取消</button>
|
||||
<button class="admin-btn btn-danger">删除</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
$('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',
|
||||
<script>
|
||||
document.querySelectorAll('.admin-btn').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (btn.classList.contains('active')) return
|
||||
btn.classList.add('active')
|
||||
btn.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
btn.classList.remove('active')
|
||||
},
|
||||
{ once: true },
|
||||
)
|
||||
})
|
||||
.addClass('rippleEffect')
|
||||
})
|
||||
</script>
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user