Dear @KingJut
Lay Theme uses the normal cursor like you have applied with the code above; cursor: url("source");
The Rolls Royce website uses a trick that has become widespread now. It's actually a div or html element that has javascript applied to it to mimic the cursor ( x and y axis position on screen ).
Within the code the native cursor has been removed:
Screen Shot 2022-05-27 at 9.51.15 AM.png
Normally when taking a screenshot the cursor would not be captured, this also helps us know its an HTML element:
Screen Shot 2022-05-27 at 9.51.08 AM.png
The Rolls Royce Cursor CSS:
.rrmc-cursor {
display: block;
top: 0px;
transform: translate3d(688px, 323px, 0px);
position: absolute;
width: 46px;
height: 46px;
top: 0;
left: 0;
z-index: 6000;
pointer-events: none;
display: none;
mix-blend-mode: difference;
It's using transform: translate3d('value'); but you could also use the CSS 'scale' or 'zoom' properties.
These links may help you add scaling or zoom to the default cursor but the problem lies with transitioning between the two. An interesting mention in one of these links is to use a gif to mimic the effect:
https://stackoverflow.com/questions/38767322/css-cursor-transition
https://css-tricks.com/almanac/properties/c/cursor/
https://stackoverflow.com/questions/33715491/how-to-reduce-the-size-of-image-with-cursor-url
https://www.digitalocean.com/community/tutorials/css-cursor-property
And this is a custom HTML cursor
https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/
Best
Richard
