Hi, Do you think about how you can create a custom cursor for your website?
This section will show you how to create custom cursors quickly and easily. We must take simple step (Create a HTML file and paste the codes below into it)
<div class="mouse" id="mouse">
<img src="https://i.postimg.cc/NFx1b2f7/pack2586.png" alt="">
</div>
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
* {
cursor: none;
}
.mouse {
width: 20px;
height: 20px;
background-color: none;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
}
.mouse img {
width: 40px;
}
</style>
<script>
document.onmousemove = function (e) {
var mouse = document.getElementById("mouse");
console.log(mouse.style);
mouse.style.left = e.pageX + 1 + "px";
mouse.style.top = e.pageY + 1 + "px";
}
</script>
Print
Share
Comment
Cite
Upload
Translate
APA
h_mobarakian | Sciencx (2024-03-29T10:56:52+00:00) » Create a custom cursor for your website. Retrieved from https://www.scien.cx/2021/07/10/create-a-custom-cursor-for-your-website/.
MLA" » Create a custom cursor for your website." h_mobarakian | Sciencx - Saturday July 10, 2021, https://www.scien.cx/2021/07/10/create-a-custom-cursor-for-your-website/
HARVARDh_mobarakian | Sciencx Saturday July 10, 2021 » Create a custom cursor for your website., viewed 2024-03-29T10:56:52+00:00,<https://www.scien.cx/2021/07/10/create-a-custom-cursor-for-your-website/>
VANCOUVERh_mobarakian | Sciencx - » Create a custom cursor for your website. [Internet]. [Accessed 2024-03-29T10:56:52+00:00]. Available from: https://www.scien.cx/2021/07/10/create-a-custom-cursor-for-your-website/
CHICAGO" » Create a custom cursor for your website." h_mobarakian | Sciencx - Accessed 2024-03-29T10:56:52+00:00. https://www.scien.cx/2021/07/10/create-a-custom-cursor-for-your-website/
IEEE" » Create a custom cursor for your website." h_mobarakian | Sciencx [Online]. Available: https://www.scien.cx/2021/07/10/create-a-custom-cursor-for-your-website/. [Accessed: 2024-03-29T10:56:52+00:00]
rf:citation » Create a custom cursor for your website | h_mobarakian | Sciencx | https://www.scien.cx/2021/07/10/create-a-custom-cursor-for-your-website/ | 2024-03-29T10:56:52+00:00
https://github.com/addpipe/simple-recorderjs-demo