我正在为我的网站定制光标设计.我找到了一个我喜欢的设计,并根据我的喜好对其进行了调整.唯一的问题是,当我滚动时,设计也会滚动离开.当我移动鼠标时,它会返回.
const cursor = document.querySelector('.cursor')
document.addEventListener('mousemove', (e) => {
cursor.setAttribute("style", "top: " + (e.pageY - 60) + "px; left: " + (e.pageX - 60) + "px;")
})
document.addEventListener("click", (e) => {
console.log(e.target)
cursor.classList.add('click')
setTimeout(() => {
cursor.classList.remove('click')
}, 500)
})
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
font-family: Montserrat, sans-serif;
font-size: 30px;
background: #000;
color: #fff;
cursor: none;
position: relative;
min-height: 100vh;
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div {
display: inline-block;
padding: 20px;
}
.cursor {
pointer-events: none;
position: absolute;
width: 80px;
height: 80px;
background: #fff;
border-radius: 50%;
mix-blend-mode: exclusion;
background: radial-gradient(circle, #000 0%, #000 3.99%, #fff 4%, #fff 100%);
}
.cursor.click {
animation: click .3s ease-in-out;
}
@keyframes click {
0% {
transform: scale(1);
}
5% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
<div class="cursor">
</div>
<h1>Hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi nisi, congue at mattis in, fermentum at purus. In venenatis diam eget facilisis pharetra. Nam eget metus gravida nibh consectetur auctor. Nunc dignissim eros nunc, at tempus dui tincidunt quis.
Mauris augue dui, pretium vel nunc ac, lacinia condimentum est. Maecenas mattis ligula non mi rutrum sodales. Aenean porta augue eget ex convallis, eget pulvinar felis accumsan. Suspendisse lorem nunc, dignissim at sapien eget, condimentum varius enim.
Duis bibendum sed justo non laoreet. Ut egestas nisi vel interdum viverra. Ut consectetur ex sed sem pretium, convallis egestas tellus elementum. Maecenas libero felis, efficitur nec dolor et, ultrices dignissim magna.</p>
<br>
我曾try 将PageX和Pagey更改为ClientX和ClientY,但如果滚动太远,就会使光标无法恢复.