Animated cursor support in web applications?

2019-01-06 19:05发布

站内问答 / HTML/CSS
792 8 5

Do any web browsers support animated cursors?

I've been searching the web to add custom cursors to my web application. I've been finding a lot of non animated (.cur) and animated (.ani) cursors, and using the correct CSS so that my application has custom cursors! It seems that the animated cursors are not supported in the web browsers I tried and I was wondering if there is any way possible to put animated cursors into my web application.

8条回答
萌系小妹纸
2楼-- · 2019-01-06 19:43

After doing some more research, I don't think it's possible at the moment. It doesn't seem that any of the browsers support animated cursors as of 2/8/2012 using the CSS cursor property. I suppose it could be done using JavaScript to repeatedly change the value of the cursor property every few frames to make it appear animated, but that may be more trouble than it is worth.

Animated cursor files .ani files do not work. All 5 major web browsers will not show the cursor. If you try some CSS like, cursor: url('animated.ani'), that cursor will not show up!

If you make the cursor an animated gif file, it only shows up on some browsers and it's temperamental, like cursor: url('animated.gif'), the cursor works in Firefox and Chrome but it is not animated, the cursor does not work at all in IE9 or Opera, and it did something really weird in the Windows version of Safari - it works but is only animated when I move the cursor vertically on the screen, and did not animate at all when the cursor was not moving or was moving horizontally. Credit to Brutallus for the idea to use an animated gif even though it did not work!

It doesn't seem that browsers support animated cursors at this time which is a shame because I really think it would add some depth to certain web applications. I don't advocate using animated cursors for most websites because they are extremely annoying, but there are some rare situations where they can be useful, such as a HTML5 game where the cursor can potentially add to the theme of the game.

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2019-01-06 19:45

You can make it happen with the help of a bit of javascript:

Add to your css

#container {
   cursor   : none;
}

#cursor {
  position  : absolute;
  z-index   : 10000;
  width     : 40px;
  height    : 40px;
  background: transparent url(../images/cursor.gif) 0 0 no-repeat;
}

Then add to your js

Straight Javascript Version

// Set the offset so the the mouse pointer matches your gif's pointer
var cursorOffset = {
   left : -30
 , top  : -20
}

document.getElementById('container').addEventListener("mousemove", function (e) {
  var $cursor = document.getElementById('cursor')

  $cursor.style.left = (e.pageX - cursorOffset.left) + 'px';
  $cursor.style.top = (e.pageY - cursorOffset.top) + 'px';

}, false);

Jquery Version

$('#container').on("mousemove", function (e) {
  $('#cursor').offset({ 
     left: (e.pageX - cursorOffset.left)
   , top : (e.pageY - cursorOffset.top)
  })

});
查看更多
0人赞 添加讨论(0) 举报
Melony?
4楼-- · 2019-01-06 19:47

Full code without bugs

<body id="body" onmousemove="showCoords(event)" onmouseout="clearCoor()">

<div id="mini_mouse">


</div>


<script src="lib/js/jquery-3.3.1.min.js"></script>

<script>

 function showCoords(event) {
    var elmnt = document.getElementById("html");
    var scrollTop = elmnt.scrollTop;

    var x = (event.clientX) - (10);
    var y = (event.clientY) - (10) + (scrollTop);
    document.getElementById("mini_mouse")
    .style = ("top: " + y + "px ;" + "left: " + 

    x + "px ;" + "
                  background-color: red; 
                  width: 20px; 
                  height: 20px; 
                  opacity: .5 ; 
                  position: absolute;   
                  z-index: 100; 
                  border-radius: 100px ; 
                  ");

}

function clearCoor() {
    document.getElementById("mini_mouse").style = "";
}

</script>

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
5楼-- · 2019-01-06 19:49

-->it flickers for some reason when you move the mouse in a downwards direction

It happens because the cursor goes over the animated gif (over the #mycursor image, look the code) and exits the element on which you call the function.

查看更多
0人赞 添加讨论(0) 举报
傲
6楼-- · 2019-01-06 19:51

No major browser actually supports animated cursors (of type .ani) as of 2017, and I don't think any are really planning to add them in the future. However, some random browser may support this feature (a not really well known browser), so you should add a feature that will make the cursor work in those browsers:

body {
    cursor: url("hand-pointing.ani"), pointer;
}

This way, if the animated cursor doesn't work in a user's browser, at least the normal pointer cursor is enabled. If you don't add the pointer part, than browsers without animated cursor support would load an ENTIRELY DIFFERENT cursor from what you wanted. Also, note that the default browser cursors kind of suck. I know that many people want animated cursor support added to major browsers, but it won't happen unless lots of people petition for it or something.

In other words, there is no answer to this question right now. Please comment if this changes.

查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
7楼-- · 2019-01-06 19:56

To answer your question

Do any web browsers support animated cursors?

Yes.According to MDN, IE supports .cur and .ani formats.

As a suggestion,have you considered using an animated gif image instead?

Try this in your css

cursor: url(img/animated_cursor.gif), auto;

I'd also like to point out that incase you have tried using .cur or .ani files in IE and you didnt get the result you expected, Perhaps its an issue with the path you provided in your cursor url - this blog will aid u greatly in this aspect.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)