Create a custom cursor for your website

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…


This content originally appeared on DEV Community and was authored by h_mobarakian

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>


This content originally appeared on DEV Community and was authored by h_mobarakian


Print Share Comment Cite Upload Translate Updates
APA

h_mobarakian | Sciencx (2021-07-10T16:56:09+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/
HARVARD
h_mobarakian | Sciencx Saturday July 10, 2021 » Create a custom cursor for your website., viewed ,<https://www.scien.cx/2021/07/10/create-a-custom-cursor-for-your-website/>
VANCOUVER
h_mobarakian | Sciencx - » Create a custom cursor for your website. [Internet]. [Accessed ]. 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 . 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: ]
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/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.