xxxxxxxxxx
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
xxxxxxxxxx
//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;
}
xxxxxxxxxx
#custom-cursor {
display: none;
position: fixed;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}
xxxxxxxxxx
<!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>