Search code examples
htmlcssgoogle-chromecursor

My CSS cursor's style can't work in URL('.ani')

I use the cursor style in .css file in style and using inline style, but it doesn't work.

This is my code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./../css/index.css"> -->
</head>

<body style="cursor: url('./../images/AppStarting.ani');">
  <!-- 一个术语的解释: -->
  <div>
    <dl>
      <dt>luoyang</dt>
      <dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro harum facilis placeat quis, assumenda autem ad adipisci quasi dicta sint eaque veritatis omnis incidunt sequi non doloribus vero, maxime consequuntur.</dd>
    </dl>
  </div>

</body>

</html>

I found the .ani on another cursor website. Actually, I use lots of pics, but it still doesn't work and the inspector said:

enter image description here

I don't know what's wrong.

Solution

  • Animated images like .ani, .cur file formats are not supported anymore MDN.

    I found that the following points are must be met when you link your image.

    1. Image should be in the same folder as your .html file
    2. Image should be less than or equal 32x32 pixels
    3. You must enclosed your CSS in <style></style> tags or use separate CSS style file
    4. You must have any content within your tag if not the CSS will not trigger.
    5. URL(...) must be followed by one of the fallback keywords defined in the CSS specification, such as auto or pointer

    I tried .png, .jpg files it is working by following those points. Your CSS looks fine therefor I assume your images are larger than 32x32 pixel. Reduce the image pixel to 32x32 and check. Hope its helps you.

    LIMITATIONS

    In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms. (Due to a bug in Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 on Windows limits to 32×32px. This is fixed in later versions.)

    UPDATE Working code

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="style.css"> -->
  <title>Test</title>
  <style>
    body {
      background-color: powderblue;
      cursor: url(cursor.png), auto;
    }
  </style>
</head>

<body>
  <div>
    <dl>
      <dt>luoyang</dt>
      <dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro harum facilis placeat quis, assumenda autem ad
        adipisci quasi dicta sint eaque veritatis omnis incidunt sequi non doloribus vero, maxime consequuntur.</dd>
    </dl>
  </div>

</body>

</html>