CSS 实现自定义动态光标效果

虽然本文的方案理论上是没什么问题的，但是在不同的设备或浏览器下效果不一样

甚至同一台电脑上不同时间都可能效果不同，这源于浏览器本身并不支持动态光标效果

反正我电脑开了几天没关机就有点渲染问题，重启完了又好了，真奇怪。以下是原文。

本博客暂时先关闭这个功能，毕竟在一些比较长的文章下会导致严重卡顿。

CSS 本身并不支持动态光标效果，尽管你可以给它一个 gif 文件

cursor: url('default.gif'), auto !important;

坏消息是在除了 Safari 外的浏览器上并不会动起来，而 Safari 上也非常不稳定。

好消息是，CSS 还有一个 @keyframes 属性，这使得我们可以创建动画。

既然 gif 不能播放，那么我们把 gif 拆成若干个 png 再用 @keyframes 播放不就可以了吗 qwq

对了，差点忘了，如果你只有 ani 文件，或者你不会拆分，那可以去这个网站。

下面是部分代码：

/* 这里的*表示应用样式到页面中的所有元素 */
* {
    animation: default_cursor_ani 0.8s infinite;
}
/* 定义指针切换的动画 */
@keyframes default_cursor_ani {
  0% {
    cursor: url('/libs/cursor/default/1.png'), auto;
  }
  12.5% {
    cursor: url('/libs/cursor/default/2.png'), auto;
  }
  25% {
    cursor: url('/libs/cursor/default/3.png'), auto;
  }
  37.5% {
    cursor: url('/libs/cursor/default/4.png'), auto;
  }
  50% {
    cursor: url('/libs/cursor/default/5.png'), auto;
  }
  62.5% {
    cursor: url('/libs/cursor/default/6.png'), auto;
  }
  75% {
    cursor: url('/libs/cursor/default/7.png'), auto;
  }
  87.5% {
    cursor: url('/libs/cursor/default/8.png'), auto;
  }
  100% {
    cursor: url('/libs/cursor/default/1.png'), auto;
  }
}

如果你想多搞几个花样，比如放到链接上会切换图片，那就再加上这些

/* 这里你也可以标自定义的类 */
a, img, svg, .chip, .card-title {
    animation: link_cursor_ani 0.8s infinite;
}

@keyframes link_cursor_ani {
    /* 这里类似的，太长了不放了 */
}