<h1>点任意位置</h1>
.mpoint {
position: absolute;
padding: 0;
margin: 0;
width: 200px;
height: 200px;
border-radius: 50%;
animation: click 1s;
}
@keyframes click {
0% {
transform: scale(0, 0);
background-color: #10ffff;
opacity: 0;
}
30% {
transform: scale(1, 1);
opacity: 0.9;
}
100% {
transform: scale(0, 0);
background-color: #f0b051;
opacity: 0;
}
}
h1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
body{
overflow:hidden;
}
let cdiv = document.createElement("div");
//动画执行完后移除自身
cdiv.addEventListener("animationend", () => cdiv.remove());
window.addEventListener("click", (e) => {
document.body.append(cdiv);
cdiv.className = "mpoint";
//定位圆圈的位置,为鼠标点坐标
cdiv.style.left = e.clientX - cdiv.clientWidth / 2 + "px";
cdiv.style.top = e.clientY - cdiv.clientHeight / 2 + "px";
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.