vue js css点击水波样式
程序员文章站
2022-04-12 08:09:35
div 按钮click事件方法不能带括号 () ! 首页 click 方法 获取鼠标点击位置 e.offsetX // 获取相对 x坐标 e.offsetY // 获取相对 y坐标 tou.....
- div 按钮
click事件方法不能带括号 () !
<div
class="ripple"
@click="touchstart"
>
<router-link to="/">首页</router-link>
</div>
- click 方法 获取鼠标点击位置
e.offsetX // 获取相对 x坐标
e.offsetY // 获取相对 y坐标
touchstart(event) {
var style = document.createElement("style");
style.innerHTML = `.ripple::after{top:${event.offsetY - 50}px;left:${
event.offsetX - 100
}px;}`;
document.head.appendChild(style);
},
- css 样式
.ripple {
position: relative;
//隐藏溢出的径向渐变背景
overflow: hidden;
width: 200;
height: 100;
}
.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
//设置径向渐变
background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.3s, opacity 0.5s;
}
.ripple:active:after {
transform: scale(0, 0);
opacity: 0.3;
//设置初始状态
transition: 0s;
}
本文地址:https://blog.csdn.net/weixin_46329969/article/details/109382858