best custom cursor

//Syntax .container:hover { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' ><path d='M ... Z'/></svg>"), auto; } //Real example .container:hover { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' ><path d='M 3 5 L 3 23 C 3 25.210938 4.789063 27 7 27 L 25 27 C 27.210938 27 29 25.210938 29 23 L 29 12 L 23 12 L 23 5 Z M 5 7 L 21 7 L 21 23 C 21 23.730469 21.222656 24.410156 21.5625 25 L 7 25 C 5.808594 25 5 24.191406 5 23 Z M 7 9 L 7 14 L 19 14 L 19 9 Z M 9 11 L 17 11 L 17 12 L 9 12 Z M 23 14 L 27 14 L 27 23 C 27 24.191406 26.191406 25 25 25 C 23.808594 25 23 24.191406 23 23 Z M 7 15 L 7 17 L 12 17 L 12 15 Z M 14 15 L 14 17 L 19 17 L 19 15 Z M 7 18 L 7 20 L 12 20 L 12 18 Z M 14 18 L 14 20 L 19 20 L 19 18 Z M 7 21 L 7 23 L 12 23 L 12 21 Z M 14 21 L 14 23 L 19 23 L 19 21 Z'/></svg>"), auto; }

custom cursor

<!DOCTYPE html>
<html>
 
<head>
    <style>
        :root {
            --color: 255, 71, 84;
            --cursor-size: 30px;
        }
 
        * {
            cursor: none;
        }
 
        html,
        body {
            height: 100%;
        }
 
        body {
            margin: 0;
            overflow: hidden;
 
            background: #121212;
        }
 
        .custom-cursor {
            position: absolute;
            z-index: 99;
            top: 0;
            left: 0;
 
            width: var(--cursor-size);
            height: var(--cursor-size);
 
            border: calc(var(--cursor-size)
                        /30) solid #fff;
            border-radius: 50%;
 
            animation: cursor 800ms infinite
                    alternate ease-in-out;
        }
 
        .custom-cursor::before {
            content: "";
            display: block;
            width: calc(var(--cursor-size) / 2);
            height: calc(var(--cursor-size) / 2);
 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
 
            border: calc(var(--cursor-size) / 6)
                    solid rgba(var(--color), 0.5);
 
            border-radius: 50%;
 
            animation: cursor-before 800ms infinite
                    alternate ease-in-out;
        }
 
        .custom-cursor.click {
            animation: cursor-click 800ms
                normal ease-in-out;
        }
 
        @keyframes cursor {
            from {
                transform: scale(1);
                border-color: #fff;
            }
 
            to {
                transform: scale(1.5);
                border-color: rgb(var(--color));
            }
        }
 
        @keyframes cursor-before {
            from {
                transform: translate(-50%, -50%) scale(1);
                border-color: rgba(var(--color), 0.5);
            }
 
            to {
                transform: translate(-50%, -50%) scale(1.5);
                border-color: rgba(var(--color), 0.75);
            }
        }
 
        @keyframes cursor-click {
 
            0%,
            100% {
                transform: scale(1);
            }
 
            50% {
                transform: scale(2.5);
                border-color: rgb(var(--color));
            }
        }
    </style>
</head>
 
<body>
    <div class="custom-cursor"></div>
</body>
 
</html>

Posted by: Guest on December-21-2021

Source

Code answers related to "best custom cursor"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Answers for "best custom cursor"

Code answers related to "best custom cursor"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us