我的 CSS 光标样式在 URL('.ani') 中不起作用

Question

我在 style 的 .css 文件中使用光标样式并使用内联样式，但它不起作用。

这是我的代码

<!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>

我在另一个光标网站上找到了 .ani。其实我用了很多图片，还是不行，检查员说：

不知道怎么回事

Answer 1

不再支持像 .ani, .cur 文件格式这样的动画图像 MDN。

我发现当你link你的图片时必须满足以下几点。

图像应与您的 .html 文件位于同一文件夹中
图片应小于或等于 32x32 像素
您必须将 CSS 包含在 <style></style> 标签中或使用单独的 CSS 样式文件
您的标签中必须包含任何内容，否则 CSS 将不会触发。
URL(...) must be followed by one of the fallback keywords定义在CSS规范中，例如auto或pointer

我按照这些要点尝试了 .png, .jpg 个文件。您的 CSS 看起来不错，因此我假设您的图片大于 32x32 像素。将图像像素减小到 32x32 并检查。希望对你有帮助。

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.)

更新工作代码

<!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>

我的 CSS 光标样式在 URL('.ani') 中不起作用

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

html

css

google-chrome

cursor