From earlier post - the dancing Homer - I put a custom cursor on hover event. The basic CSS for that is just like putting background image on an element.
cursor: url (URL-of-image),auto;
autothere is for fallback.
The image can be any kind of format: GIF, PNG, JPEG, etc. But, of course, for sleeker look, you have to put transparent background image, which can be accomplished in GIF (can be animated image also), PNG, and also SVG format.
It's a bit different than changing cursor image on a computer (Windows), which is using
.ani format. If you have already got sets of cursor
.ani images, all you gotta do is export those with AniTuner (the link is on the bottom of this post) to
gif format. Then you can use them for your website/blog.
After converted the cursor format to animated gif, I then converted the exported gif to base64 data URI (link below this post). I dig the image URI format, because even though sometimes it can be larger than the original file size, the advantage is that I don't have to hotlink any image from anywhere.
~ Hover your cursor on these colorful boxes ~
As you can see on the demo, the data URI didn't show any animation. That's fine, just for example purpose. These are the original images: