Monkey Raptor

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;

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 .cur or .ani format. If you have already got sets of cursor .cur or .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.

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:

CSS

HTML elements

Links

• The funky cursors above from: Totally Free Cursors
• Export animated/static cursor to GIF: AniTuner freeware
• Convert GIF to base64 image: WebSemantics