单标签实现按钮涟漪效果
程序员文章站
2022-06-09 16:58:39
...
主要通过更换 css 上的 animation 来实现涟漪效果。
但是大部分的实现方法会增加一个空白节点，
所以想出通过操作伪元素的方案来做。
代码如下
在线体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.input {
padding: 5em 10em;
border-radius: 0.3em;
position: relative;
background-color: rgb(189, 86, 86);
display: inline-block;
overflow: hidden;
}
.input1::after {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
/* transition: all 0.4s ease-in-out; */
z-index: 1111;
transform: scale(0);
/* top: 0;
left: 0; */
/* animation: spin 01s linear; */
background-color: rgba(0, 0, 0, 0.45);
}
@keyframes spin {
0% {
transform: scale(0);
background-color: rgba(0, 0, 0, 0.45);
}
100% {
transform: scale(150);
background-color: transparent;
}
}
</style>
</head>
<body>
<div onclick="fn(event)" class="input input1">
这是一个按钮
</div>
<script>
// 这是一个操作伪元素样式的方法
function ruleSelector(selector) {
function uni(selector) {
return selector.replace(/::/g, ":");
}
// es6
return Array.from(document.styleSheets)
.reduce((a, b) => {
return a.concat(Array.from(b.cssRules));
}, [])
.filter(x => {
return x.selectorText === selector;
});
// es5
// return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function (x) {
// return Array.prototype.slice.call(x.cssRules);
// })), function (x) {
// return uni(x.selectorText) === uni(selector);
// });
}
function fn(e) {
ruleSelector(".input1::after")[0].style.top = e.offsetY - parseInt(ruleSelector(".input1::after")[0].style.width,
10) / 2 + "px";
ruleSelector(".input1::after")[0].style.left = e.offsetX - parseInt(ruleSelector(".input1::after")[0].style
.height, 10) / 2 + "px";
ruleSelector(".input1::after")[0].style.animation = '';
setTimeout(() => { // 不这样做会被合并
ruleSelector(".input1::after")[0].style.animation = 'spin .5s linear';
})
}
</script>
</body>
</html>
转载于:https://www.jianshu.com/p/545bdeeca2cd
下一篇： PHP学习系列7