Replies: 3 comments
-
补index.html
|
Beta Was this translation helpful? Give feedback.
-
补 css #g-pointer-2 { |
Beta Was this translation helpful? Give feedback.
-
补 js /* 鼠标样式 */ const body = document.querySelector("body"); function setPosition(x, y) { body.addEventListener('mousemove', (e) => { |
Beta Was this translation helpful? Give feedback.
-
将以下代码插入index.html
以下插入style.css
/鼠标样式/
#g-pointer-1 {
display: none;
}
#g-pointer-2 {
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
transition: 0.05s linear;
pointer-events: none;
background: #ffffff40;
border-radius: 50%;
z-index: 9999999;
}
以下插入main.js
/* 鼠标样式 */
const body = document.querySelector("body");
const element = document.getElementById("g-pointer-1");
const element2 = document.getElementById("g-pointer-2");
const halfAlementWidth = element.offsetWidth / 2;
const halfAlementWidth2 = element2.offsetWidth / 2;
function setPosition(x, y) {
element2.style.transform =
translate(${x - halfAlementWidth2 + 1}px, ${y - halfAlementWidth2 + 1}px)
;}
body.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function () {
setPosition(e.clientX, e.clientY);
});
});
Beta Was this translation helpful? Give feedback.
All reactions